16 lines
1.0 KiB
TypeScript
16 lines
1.0 KiB
TypeScript
'use client'
|
|
import { InputHTMLAttributes, forwardRef } from 'react'
|
|
interface InputProps extends InputHTMLAttributes<HTMLInputElement> { label?: string; error?: string }
|
|
const Input = forwardRef<HTMLInputElement, InputProps>(({ label, error, className = '', id, ...props }, ref) => {
|
|
const inputId = id || (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined)
|
|
return (
|
|
<div className="space-y-1">
|
|
{label && <label htmlFor={inputId} className="block text-sm font-medium text-slate-700 dark:text-slate-300">{label}</label>}
|
|
<input ref={ref} id={inputId} className={`w-full px-3 py-2 rounded-lg border bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 text-sm border-slate-300 dark:border-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-colors ${error ? 'border-red-500' : ''} ${className}`} {...props} />
|
|
{error && <p className="text-sm text-red-500">{error}</p>}
|
|
</div>
|
|
)
|
|
})
|
|
Input.displayName = 'Input'
|
|
export default Input
|