34 lines
971 B
TypeScript
34 lines
971 B
TypeScript
import { useId, type InputHTMLAttributes } from 'react'
|
|
import { cn } from '../../lib/cn'
|
|
|
|
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
label: string
|
|
}
|
|
|
|
/**
|
|
* Labeled text input in the terminal idiom. The label is wired to the input via
|
|
* a generated id, so consumers (and tests) can query it by its accessible name.
|
|
*/
|
|
export default function Input({ label, id, className, ...props }: InputProps) {
|
|
const generatedId = useId()
|
|
const inputId = id ?? generatedId
|
|
|
|
return (
|
|
<div className="space-y-1">
|
|
<label
|
|
htmlFor={inputId}
|
|
className="text-primary block font-mono text-sm uppercase tracking-wide"
|
|
>
|
|
{label}
|
|
</label>
|
|
<input
|
|
id={inputId}
|
|
className={cn(
|
|
'border-primary text-primary focus:ring-ring w-full border-2 bg-background px-3 py-2 font-mono focus:outline-none focus:ring-2',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|