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

feat: refactor Button and Input components to use Headless UI

Browse Source
This commit is contained in:
Ardeman 2025-03-01 16:14:03 +08:00
parent 9ef33d72d3
commit 1e876ae04f
2 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/components/ui/button.tsx
View File

@ -1,3 +1,4 @@
import { Button as HeadlessButton } from '@headlessui/react'
import { cva, type VariantProps } from 'class-variance-authority'
import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react'
import { twMerge } from 'tailwind-merge'
@ -52,7 +53,7 @@ export const Button = <C extends ElementType = 'button'>({
className,
...properties
}: ButtonProperties<C>) => {
const Component = as || 'button'
const Component = as || HeadlessButton
const classes = twMerge(buttonVariants({ variant, size, className }))
return (

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

@ -1,4 +1,4 @@
import { Field, Label, Input as UIInput } from '@headlessui/react'
import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
import { useState, type ComponentProps, type ReactNode } from 'react'
import {
get,
@ -55,7 +55,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
<Label className="mb-1 block text-gray-700">
{label} {error && <span className="text-red-500">{error.message}</span>}
</Label>
<UIInput
<HeadlessInput
type={inputType}
className="h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
placeholder={inputType === 'password' ? '******' : placeholder}