article form creator

src/components/input/Input.tsx

@@ -14,6 +14,7 @@ interface inputProps {
   onChange: (state: string) => void;
   defaultState?: string;
   autocomplete?: string;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 export const Input: React.FC<inputProps> = ({
@@ -27,12 +28,14 @@ export const Input: React.FC<inputProps> = ({
   onChange,
   defaultState = "",
   name = "",
-  autocomplete="",
+  autocomplete = "",
+  onKeyDown,
 }) => {
   const [value, setValue] = React.useState<string>(defaultState);
   const [visible, setVIsible] = React.useState<boolean>(type != "password");
 
   React.useEffect(() => onChange(value), [value]);
+  React.useEffect(() => setValue(defaultState), [defaultState]);
 
 
 
@@ -59,12 +62,18 @@ export const Input: React.FC<inputProps> = ({
           placeholder={placeholder}
           onChange={(e) => {
             setValue(e.target.value);
-          }} />
+          }}
+          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (onKeyDown)
+              onKeyDown(e);
+          }
+          }
+        />
         {
           type == "password" &&
           <img src={visible ? eyeOpen : eyeClosed} className="w-[24px] h-[24px] cursor-pointer right-[16px] top-[8px] absolute" onClick={() => {
             setVIsible(!visible);
-          }}/>
+          }} />
         }
       </div>