yoginth.com / hey
Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿
fork atom

feat: add error variant to TextArea (#5890)

authored by yoginth.com and committed by

GitHub e1e2b765 628eddc0

+24 -8
+24 -8
apps/web/src/components/Shared/UI/TextArea.tsx
··· 1 + import { cva, type VariantProps } from "class-variance-authority"; 1 2 import type { ComponentProps } from "react"; 2 3 import { forwardRef, memo, useId } from "react"; 3 4 import cn from "@/helpers/cn"; 4 5 import { FieldError } from "./Form"; 5 6 6 - interface TextAreaProps extends ComponentProps<"textarea"> { 7 + const textAreaVariants = cva( 8 + [ 9 + "w-full rounded-xl border bg-white px-4 py-2 shadow-xs", 10 + "focus:border-gray-500 focus:ring-0", 11 + "disabled:bg-gray-500/20 disabled:opacity-60", 12 + "dark:bg-gray-900" 13 + ], 14 + { 15 + defaultVariants: { error: false }, 16 + variants: { 17 + error: { 18 + false: "border-gray-300 dark:border-gray-700", 19 + true: "border-red-500 placeholder:text-red-500" 20 + } 21 + } 22 + } 23 + ); 24 + 25 + interface TextAreaProps 26 + extends ComponentProps<"textarea">, 27 + VariantProps<typeof textAreaVariants> { 7 28 label?: string; 8 29 } 9 30 10 31 const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>( 11 - ({ label, ...props }, ref) => { 32 + ({ className, error, label, ...props }, ref) => { 12 33 const id = useId(); 13 34 14 35 return ( 15 36 <label className="w-full" htmlFor={id}> 16 37 {label ? <div className="label">{label}</div> : null} 17 38 <textarea 18 - className={cn( 19 - "w-full rounded-xl border border-gray-300 bg-white px-4 py-2 shadow-xs", 20 - "focus:border-gray-500 focus:ring-0", 21 - "disabled:bg-gray-500/20 disabled:opacity-60", 22 - "dark:border-gray-700 dark:bg-gray-900" 23 - )} 39 + className={cn(textAreaVariants({ className, error }))} 24 40 id={id} 25 41 ref={ref} 26 42 {...props}