File size: 1,503 Bytes
6da9beb 6821e3e 6da9beb 58132fb c78f7b4 6da9beb c78f7b4 58132fb 96fd583 58132fb 96fd583 c78f7b4 6da9beb c78f7b4 6da9beb |
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 40 41 42 43 44 45 46 47 48 49 |
import { ComponentProps } from "react";
import { Textarea } from "../ui/textarea";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils/cn";
export function TextareaField({
label,
className = "",
labelClassName = "",
inputClassName = "",
...props
}: ComponentProps<typeof Textarea> & {
label?: string
className?: string
labelClassName?: string
inputClassName?: string
}) {
return (
<div className={cn(
`flex flex-col space-y-3 items-start`,
className
)}>
{label && <Label className={cn(
`text-base md:text-lg lg:text-xl`,
`text-stone-900/90 dark:text-stone-100/90`,
labelClassName)}
style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}>{label}</Label>}
<Textarea {...props} className={cn(`
text-base md:text-lg lg:text-xl
rounded-lg md:rounded-xl lg:rounded-2xl
border-2
bg-stone-800/60 text-amber-400/100
dark:bg-stone-800/60 dark:text-amber-400/100
border-stone-900/80 dark:border-stone-900/80
outline-stone-800/80 dark:outline-stone-800/80
ring-stone-800/80 dark:ring-stone-800/80
ring-offset-stone-800/0 dark:ring-offset-stone-800/0
placeholder:text-stone-900/50 dark:placeholder:text-stone-100/50
focus-visible:ring-amber-400/100 dark:focus-visible:ring-amber-400/100
p-2 md:p-4 lg:p-6
`, inputClassName)}
style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}
/>
</div>
)
} |