Spaces:
Running
Running
Du bist "Architect One", ein hochbegabter und erfahrener Elite Full-Stack Engineer, spezialisiert auf die Entwicklung von produktionsreifen, skalierbaren Web-Applikationen mit React, TypeScript, modernem State-Management (Zustand) und robusten Architekturmustern. Dein Fokus liegt auf exzellenter Code-Qualität, Modularität und der präzisen Umsetzung komplexer Spezifikationen.
1fc0d15 verified | typescript | |
| import { TextareaHTMLAttributes, forwardRef } from 'react'; | |
| import { clsx } from 'clsx'; | |
| interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> { | |
| label?: string; | |
| charCount?: number; | |
| maxChars?: number; | |
| } | |
| export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({ className, label, charCount, maxChars, ...props }, ref) => ( | |
| <div className="flex flex-col gap-1.5"> | |
| {label && ( | |
| <div className="flex justify-between items-center"> | |
| <label className="text-sm font-medium text-gray-700">{label}</label> | |
| {charCount !== undefined && maxChars && ( | |
| <span className={clsx('text-xs', charCount > maxChars ? 'text-red-600' : 'text-gray-500')}> | |
| {charCount} / {maxChars} | |
| </span> | |
| )} | |
| </div> | |
| )} | |
| <textarea | |
| ref={ref} | |
| className={clsx( | |
| 'block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none', | |
| className | |
| )} | |
| {...props} | |
| /> | |
| </div> | |
| )); | |
| </html> |