Textarea

import * as React from "react"
import { cn } from "cn"

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "flex field-sizing-content min-h-16 w-full resize-none rounded-2xl border border-transparent bg-input/50 px-3 py-3 text-base transition-[color,box-shadow,background-color] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }

import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

// The copy: change text here, not in the markup.
const COPY = {
  label: "What are you building?",
  placeholder: "A launch page for a small hardware studio…",
} as const

/** Textarea with a Label and a placeholder. */
export default function TextareaDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="brief">{COPY.label}</Label>
      <Textarea id="brief" rows={4} placeholder={COPY.placeholder} />
    </div>
  )
}