legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: refactor Input component to use Headless UI and add disabled prop

Browse Source
This commit is contained in:
Ardeman 2025-03-01 06:32:20 +08:00
parent 42eb159a52
commit 9ef33d72d3
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/components/ui/input.tsx
View File

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