From 9ef33d72d3df435a928e4957c5869ff67948ff3e Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sat, 1 Mar 2025 06:32:20 +0800
Subject: [PATCH] feat: refactor Input component to use Headless UI and add
 disabled prop

---
 app/components/ui/input.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx
index 3a7ee75..490954d 100644
--- a/app/components/ui/input.tsx
+++ b/app/components/ui/input.tsx
@@ -1,3 +1,4 @@
+import { Field, Label, Input as UIInput } from '@headlessui/react'
 import { useState, type ComponentProps, type ReactNode } from 'react'
 import {
   get,
@@ -33,6 +34,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
     rules,
     type = 'text',
     placeholder,
+    disabled,
     ...rest
   } = properties
   const [inputType, setInputType] = useState(type)
@@ -45,15 +47,15 @@ export const Input = <TFormValues extends Record<string, unknown>>(
   const error: FieldError = get(errors, name)
 
   return (
-    <div className="relative">
-      <label
-        htmlFor={id}
-        className="mb-1 block text-gray-700"
-      >
+    <Field
+      className="relative"
+      disabled={disabled}
+      id={id}
+    >
+      <Label className="mb-1 block text-gray-700">
         {label} {error && <span className="text-red-500">{error.message}</span>}
-      </label>
-      <input
-        id={id}
+      </Label>
+      <UIInput
         type={inputType}
         className="h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
         placeholder={inputType === 'password' ? '******' : placeholder}
@@ -78,6 +80,6 @@ export const Input = <TFormValues extends Record<string, unknown>>(
           />
         </Button>
       )}
-    </div>
+    </Field>
   )
 }