File size: 1,333 Bytes
1f21206 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | import type { TextareaHTMLAttributes } from 'react'
type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
label?: string
error?: string
required?: boolean
}
export function Textarea({ label, error, required, className = '', id, ...props }: TextareaProps) {
const inputId = id || label?.toLowerCase().replace(/\s+/g, '-')
return (
<div className="flex flex-col gap-1">
{label && (
<label htmlFor={inputId} className="text-sm font-medium text-[var(--color-text-primary)]">
{label}
{required && <span className="text-[var(--color-error)] ml-0.5">*</span>}
</label>
)}
<textarea
id={inputId}
className={`
min-h-[120px] px-3 py-2 rounded-[var(--radius-lg)] border text-sm resize-y
bg-[var(--color-surface)] text-[var(--color-text-primary)]
placeholder:text-[var(--color-text-tertiary)]
transition-colors duration-150
${error
? 'border-[var(--color-error)]'
: 'border-[var(--color-border)] focus:border-[var(--color-border-focus)] focus:shadow-[var(--shadow-focus-ring)]'
}
outline-none
${className}
`}
{...props}
/>
{error && <p className="text-xs text-[var(--color-error)]">{error}</p>}
</div>
)
}
|