upd

client/src/components/Input.tsx

@@ -1,11 +1,16 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from "react";
 
 interface InputProps {
-  type?: "text" | "email" | "password";
+  type?: "text" | "email" | "password" | "time";
   placeholder?: string;
   autoFocus?: boolean;
   required?: boolean;
+  readOnly?: boolean;
+  defaultValue?: string;
+  className?: string;
   handleChange?: (value: string) => void;
+  handleFocus?: () => void;
 }
 
 function Input({
@@ -13,15 +18,18 @@ function Input({
   placeholder,
   autoFocus,
   required,
+  readOnly,
+  defaultValue,
+  className,
   handleChange,
+  handleFocus,
 }: InputProps) {
-  const [value, setValue] = useState<string>("");
+  const [value, setValue] = useState<string | undefined>(defaultValue);
 
   useEffect(() => {
-    if (handleChange) {
+    if (value && handleChange) {
       handleChange(value);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
   return (
@@ -30,9 +38,11 @@ function Input({
       placeholder={placeholder}
       autoFocus={autoFocus}
       required={required}
-      value={value}
+      readOnly={readOnly}
+      value={defaultValue}
       onChange={(e) => setValue(e.target.value)}
-      className="px-3 py-2.5 outline-none rounded-lg border border-[#DAE0E5]"
+      onFocus={handleFocus}
+      className={`px-3 py-2.5 outline-none rounded-lg border border-[#DAE0E5] focus:border-[#49A1F5] transition-colors ${className}`}
     />
   );
 }