56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import { useId } from 'react'
|
|
import clsx from 'clsx'
|
|
|
|
const formClasses = {
|
|
light:
|
|
'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
|
|
dark:
|
|
'block w-full appearance-none rounded-lg border border-gray-600 bg-transparent py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-white placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
|
|
}
|
|
|
|
function Label({ id, children, variant = 'light' }: { id: string; children: React.ReactNode, variant?: 'light' | 'dark' }) {
|
|
return (
|
|
<label
|
|
htmlFor={id}
|
|
className={clsx(
|
|
'mb-2 block text-sm font-semibold',
|
|
variant === 'light' ? 'text-gray-900' : 'text-white',
|
|
)}
|
|
>
|
|
{children}
|
|
</label>
|
|
)
|
|
}
|
|
|
|
export function TextField({
|
|
label,
|
|
type = 'text',
|
|
className,
|
|
variant = 'light',
|
|
...props
|
|
}: Omit<React.ComponentPropsWithoutRef<'input'>, 'id'> & { label?: string; variant?: 'light' | 'dark' }) {
|
|
let id = useId()
|
|
|
|
return (
|
|
<div className={className}>
|
|
{label && <Label id={id} variant={variant}>{label}</Label>}
|
|
<input id={id} type={type} {...props} className={formClasses[variant]} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function SelectField({
|
|
label,
|
|
className,
|
|
...props
|
|
}: Omit<React.ComponentPropsWithoutRef<'select'>, 'id'> & { label?: string }) {
|
|
let id = useId()
|
|
|
|
return (
|
|
<div className={className}>
|
|
{label && <Label id={id}>{label}</Label>}
|
|
<select id={id} {...props} className={clsx(formClasses, 'pr-8')} />
|
|
</div>
|
|
)
|
|
}
|