Textarea

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

export default function Basic() {
  return (
    <>
      <div className="grid w-full gap-2">
        <Label htmlFor="name">Your Name</Label>
        <Textarea id="name" placeholder="Enter your name" />
      </div>
    </>
  );
}

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

export default function Disabled() {
  return (
    <>
      <div className="grid w-full gap-2">
        <Label htmlFor="name-disabled">Your Name</Label>
        <Textarea id="name-disabled" placeholder="Enter your name" disabled />
      </div>
    </>
  );
}

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

export default function TextareaError() {
  return (
    <>
      <div className="grid w-full gap-2">
        <Label htmlFor="name">Your Name</Label>
        <Textarea
          id="name"
          placeholder="Enter your name"
          className="border-red-600"
        />
        <p className="text-xs font-medium text-red-600">
          This field is required
        </p>
      </div>
    </>
  );
}

import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";

export default function GroupSpace() {
  return (
    <>
      <div className="flex w-full items-start gap-2">
        <Textarea id="name" placeholder="Enter your name" />
        <Button>Submit</Button>
      </div>
    </>
  );
}

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Textarea } from "@/components/ui/textarea";

export default function WithAvatar() {
  return (
    <>
      <div className="flex w-full items-start gap-2">
        <Avatar>
          <AvatarImage src="/avatars/avatar-01.webp" />
          <AvatarFallback>PJ</AvatarFallback>
        </Avatar>
        <Textarea id="withavatar" placeholder="Enter your name" />
      </div>
    </>
  );
}