improve: fix text field

src/components/molecules/inputs/text-field/index.tsx

@@ -1,12 +1,6 @@
 import { FC, ReactElement, useState } from "react";
-import {
-  FieldValues,
-  useController,
-  UseControllerProps,
-} from "react-hook-form";
-import { IInputTextProps } from "./types";
-
-type IProps<T extends FieldValues> = UseControllerProps<T> & IInputTextProps;
+import { FieldValues, useController } from "react-hook-form";
+import { TTextFieldProps } from "./types";
 
 const EyeClose: FC = (): ReactElement => (
   <svg
@@ -39,11 +33,7 @@ const EyeOpen: FC = (): ReactElement => (
       strokeLinejoin="round"
       d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
     />
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-    />
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
   </svg>
 );
 
@@ -52,7 +42,7 @@ export const TextField = <T extends FieldValues>({
   type = "text",
   status = "none",
   ...props
-}: IProps<T>): ReactElement => {
+}: TTextFieldProps<T>): ReactElement => {
   const [showPassword, setShowPassword] = useState(false);
 
   const toggleShowPassword = (): void => {
@@ -77,9 +67,7 @@ export const TextField = <T extends FieldValues>({
           }`}
         >
           {props.label}
-          {props.required && (
-            <span className="text-error-base font-bold ml-1">*</span>
-          )}
+          {props.required && <span className="text-error-base font-bold ml-1">*</span>}
         </label>
       )}
 
@@ -100,20 +88,13 @@ export const TextField = <T extends FieldValues>({
             "focus:ring-1 focus:ring-error-base bg-error-100 placeholder:text-white ring-1 ring-error-base"
           }
 
-          ${
-            status === "success" &&
-            "focus:ring-1 focus:ring-success-base bg-success-100"
-          }
+          ${status === "success" && "focus:ring-1 focus:ring-success-base bg-success-100"}
 
-          ${
-            status === "warning" &&
-            "focus:ring-1 focus:ring-warning-base bg-warning-100"
-          }
+          ${status === "warning" && "focus:ring-1 focus:ring-warning-base bg-warning-100"}
 
           ${
             !status ||
-            (status === "none" &&
-              "ring-gray-300 ring-1 focus:ring-primary-base bg-gray-100")
+            (status === "none" && "ring-gray-300 ring-1 focus:ring-primary-base bg-gray-100")
           }
 
              ${
@@ -132,29 +113,17 @@ export const TextField = <T extends FieldValues>({
 
         <div className="absolute flex right-4 top-1/2 transform -translate-y-1/2 space-x-2">
           {status === "success" && (
-            <img
-              src="/assets/check-circle.svg"
-              alt="check circle"
-              width={20}
-              height={20}
-            />
+            <img src="/assets/check-circle.svg" alt="check circle" width={20} height={20} />
           )}
           {type === "password" && (
             <button type="button" onClick={toggleShowPassword}>
-              {type === "password" && !showPassword ? (
-                <EyeClose />
-              ) : (
-                <EyeOpen />
-              )}
+              {type === "password" && !showPassword ? <EyeClose /> : <EyeOpen />}
             </button>
           )}
         </div>
 
         {props.append && (
-          <label
-            className=" flex items-end justify-center w-auto"
-            htmlFor={props.name}
-          >
+          <label className=" flex items-end justify-center w-auto" htmlFor={props.name}>
             {props.append}
           </label>
         )}

src/components/molecules/inputs/text-field/types.d.ts

@@ -1,6 +1,7 @@
 import { ChangeEventHandler, ReactNode } from "react";
+import { FieldValues, UseControllerProps } from "react-hook-form";
 
-export interface IInputTextProps {
+export type TTextFieldProps<T extends FieldValues> = UseControllerProps<T> & {
   type?: "text" | "password" | "email";
   label?: string;
   name: string;
@@ -20,4 +21,4 @@ export interface IInputTextProps {
   prependColor?: string;
   appendColor?: string;
   hint?: string;
-}
+};