formatting

src/components/input/Input.tsx

@@ -1,89 +1,95 @@
-import React from "react";
-import { cn } from "../../lib/cn";
-import { eyeClosed, eyeOpen } from "../../assets/icons/input";
+import React from 'react';
+import { cn } from '../../lib/cn';
+import { eyeClosed, eyeOpen } from '../../assets/icons/input';
 
 interface inputProps {
-  name?: string;
-  type: "text" | "email" | "password" | "first_name" | "number";
-  error?: string;
-  disabled?: boolean;
-  required?: boolean;
-  label?: string;
-  placeholder?: string;
-  className?: string;
-  onChange: (state: string) => void;
-  defaultState?: string;
-  autocomplete?: string;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    name?: string;
+    type: 'text' | 'email' | 'password' | 'first_name' | 'number';
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    onChange: (state: string) => void;
+    defaultState?: string;
+    autocomplete?: string;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 export const Input: React.FC<inputProps> = ({
-  type = "text",
-  error = "",
-  // disabled = false,
-  // required = false,
-  label = "",
-  placeholder = "",
-  className = "",
-  onChange,
-  defaultState = "",
-  name = "",
-  autocomplete = "",
-  onKeyDown,
+    type = 'text',
+    error = '',
+    // disabled = false,
+    // required = false,
+    label = '',
+    placeholder = '',
+    className = '',
+    onChange,
+    defaultState = '',
+    name = '',
+    autocomplete = '',
+    onKeyDown,
 }) => {
-  const [value, setValue] = React.useState<string>(defaultState);
-  const [visible, setVIsible] = React.useState<boolean>(type != "password");
+    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]);
+    React.useEffect(() => onChange(value), [value]);
+    React.useEffect(() => setValue(defaultState), [defaultState]);
 
+    return (
+        <div className={cn('relative', className)}>
+            <div
+                className={cn(
+                    'text-[18px] text-liquid-white font-medium h-[23px] mb-[10px] transition-all',
+                    label == '' && 'h-0 mb-0',
+                )}
+            >
+                {label}
+            </div>
+            <div className="relative">
+                <input
+                    className={cn(
+                        'bg-liquid-lighter w-full rounded-[10px] outline-none pl-[16px] py-[8px] placeholder:text-liquid-light',
+                        type == 'password' ? 'h-[40px]' : 'h-[36px]',
+                    )}
+                    value={value}
+                    name={name}
+                    autoComplete={autocomplete}
+                    type={
+                        type == 'password'
+                            ? visible
+                                ? 'text'
+                                : 'password'
+                            : type
+                    }
+                    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>
 
-
-  return (
-    <div className={cn(
-      "relative",
-      className
-    )}>
-      <div className={cn("text-[18px] text-liquid-white font-medium h-[23px] mb-[10px] transition-all",
-        label == "" && "h-0 mb-0"
-      )}>
-        {label}
-      </div>
-      <div className="relative">
-        <input
-          className={cn(
-            "bg-liquid-lighter w-full rounded-[10px] outline-none pl-[16px] py-[8px] placeholder:text-liquid-light",
-            type == "password" ? "h-[40px]" : "h-[36px]"
-          )}
-          value={value}
-          name={name}
-          autoComplete={autocomplete}
-          type={type == "password" ? (visible ? "text" : "password") : type}
-          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>
-
-      <div className={cn("text-liquid-red text-[14px] h-[18px] text-right mt-[5px]",
-        error == "" && "h-0 mt-0"
-      )}>
-        {error}
-      </div>
-
-    </div>
-  );
-
+            <div
+                className={cn(
+                    'text-liquid-red text-[14px] h-[18px] text-right mt-[5px]',
+                    error == '' && 'h-0 mt-0',
+                )}
+            >
+                {error}
+            </div>
+        </div>
+    );
 };