44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import { forwardRef } from 'react'
|
|
|
|
interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
label?: string
|
|
error?: string
|
|
helperText?: string
|
|
}
|
|
|
|
export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
|
({ label, error, helperText, className = '', ...props }, ref) => {
|
|
return (
|
|
<div className="w-full">
|
|
{label && (
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<textarea
|
|
ref={ref}
|
|
className={`
|
|
w-full px-4 py-2 border rounded-lg resize-none
|
|
focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
|
|
disabled:bg-gray-100 disabled:cursor-not-allowed
|
|
${error ? 'border-red-500' : 'border-gray-300'}
|
|
${className}
|
|
`}
|
|
rows={3}
|
|
{...props}
|
|
/>
|
|
{error && (
|
|
<p className="mt-1 text-sm text-red-600">{error}</p>
|
|
)}
|
|
{helperText && !error && (
|
|
<p className="mt-1 text-sm text-gray-500">{helperText}</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
TextArea.displayName = 'TextArea'
|