import { ChatTextIcon, PaperPlaneTiltIcon } from "@phosphor-icons/react/dist/ssr";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaDemo() {
  return (
    <div className="grid w-full max-w-md gap-5">
      <div className="grid gap-2">
        <Label htmlFor="ta-1" className="flex items-center gap-1.5 pl-1"><ChatTextIcon weight="bold" className="size-4 text-on-surface-muted" />Aspirasi rakyat</Label>
        <Textarea id="ta-1" placeholder="Tulis usulan fitur untuk sidang paripurna berikutnya..." />
        <Button size="sm" className="justify-self-end"><PaperPlaneTiltIcon weight="bold" /> Kirim aspirasi</Button>
      </div>
      <div className="grid gap-2">
        <Label htmlFor="ta-2" className="pl-1">Auto-grow</Label>
        <Textarea id="ta-2" autoGrow className="min-h-14" placeholder="Makin panjang, makin tinggi." />
      </div>
      <Textarea aria-invalid defaultValue="Interupsi!" aria-label="Invalid" />
    </div>
  );
}
Installation
