yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { cva, type VariantProps } from "class-variance-authority";
2import type { ComponentProps } from "react";
3import { forwardRef, memo, useId } from "react";
4import cn from "@/helpers/cn";
5import { FieldError } from "./Form";
6
7const 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
25interface TextAreaProps
26 extends ComponentProps<"textarea">,
27 VariantProps<typeof textAreaVariants> {
28 label?: string;
29}
30
31const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
32 ({ className, error, label, ...props }, ref) => {
33 const id = useId();
34
35 return (
36 <label className="w-full" htmlFor={id}>
37 {label ? <div className="label">{label}</div> : null}
38 <textarea
39 className={cn(textAreaVariants({ className, error }))}
40 id={id}
41 ref={ref}
42 {...props}
43 />
44 {props.name ? <FieldError name={props.name} /> : null}
45 </label>
46 );
47 }
48);
49
50export default memo(TextArea);