ناحیه متن (Textarea)

1import { Textarea } from "@/components/ui/textarea";
2
3export default function BasicExample() {
4  return <Textarea placeholder="پیام خود را اینجا بنویسید..." />;
5}
6

1import { Textarea } from "@/components/ui/textarea";
2import { Label } from "@/components/ui/label";
3
4export default function WithLabelExample() {
5  return (
6    <div className="space-y-2">
7      <Label htmlFor="message">پیام شما</Label>
8      <Textarea id="message" placeholder="متن خود را وارد کنید..." />
9    </div>
10  );
11}
12

1import { Textarea } from "@/components/ui/textarea";
2
3export default function SizesExample() {
4  return (
5    <div className="space-y-6">
6      <div className="grid w-full gap-2">
7        <h3 className="text-sm font-medium">کوچک (Small - 2 rows)</h3>
8        <Textarea
9          rows={2}
10          placeholder="ناحیه متن کوچک..."
11          className="min-h-[40px]"
12        />
13      </div>
14      <div className="grid w-full gap-2">
15        <h3 className="text-sm font-medium">متوسط (Medium - 4 rows)</h3>
16        <Textarea rows={4} placeholder="ناحیه متن متوسط..." />
17      </div>
18      <div className="grid w-full gap-2">
19        <h3 className="text-sm font-medium">بزرگ (Large - 8 rows)</h3>
20        <Textarea
21          rows={8}
22          placeholder="ناحیه متن بزرگ..."
23          className="min-h-[120px]"
24        />
25      </div>
26    </div>
27  );
28}
29

1import { Textarea } from "@/components/ui/textarea";
2import { Label } from "@/components/ui/label";
3
4export default function DisabledExample() {
5  return (
6    <div className="space-y-2">
7      <Label htmlFor="disabled">توضیحات</Label>
8      <Textarea
9        id="disabled"
10        disabled
11        placeholder="این فیلد غیرفعال است..."
12        value="این متن قابل ویرایش نیست"
13      />
14    </div>
15  );
16}
17

1import { useState } from "react";
2import { Textarea } from "@/components/ui/textarea";
3import { Label } from "@/components/ui/label";
4
5export default function CharacterCountExample() {
6  const [message, setMessage] = useState("");
7  const maxLength = 200;
8
9  return (
10    <div className="space-y-2">
11      <Label htmlFor="char-count">توضیحات کوتاه</Label>
12      <Textarea
13        id="char-count"
14        placeholder="حداکثر 200 کاراکتر..."
15        value={message}
16        onChange={(e) => setMessage(e.target.value)}
17        maxLength={maxLength}
18      />
19      <p className="text-sm text-muted-foreground text-left" dir="ltr">
20        {message.length} / {maxLength}
21      </p>
22    </div>
23  );
24}
25

1import { Textarea } from "@/components/ui/textarea";
2import { Label } from "@/components/ui/label";
3
4export default function ReadOnlyExample() {
5  return (
6    <div className="space-y-2">
7      <Label htmlFor="readonly">اطلاعات</Label>
8      <Textarea
9        id="readonly"
10        readOnly
11        value="این متن فقط خواندنی است و نمی‌توان آن را ویرایش کرد. برای نمایش اطلاعات ثابت استفاده می‌شود."
12      />
13    </div>
14  );
15}
16

1import { Textarea } from "@/components/ui/textarea";
2import { Label } from "@/components/ui/label";
3import { Button } from "@/components/ui/button";
4import { Send } from "lucide-react";
5
6export default function WithButtonExample() {
7  return (
8    <div className="space-y-4">
9      <div className="space-y-2">
10        <Label htmlFor="message-send">پیام شما</Label>
11        <Textarea
12          id="message-send"
13          placeholder="پیام خود را بنویسید..."
14        />
15      </div>
16      <div className="flex justify-end">
17        <Button>
18          <Send className="ms-2 h-4 w-4" />
19          ارسال
20        </Button>
21      </div>
22    </div>
23  );
24}
25

1import { Textarea } from "@/components/ui/textarea";
2import { Label } from "@/components/ui/label";
3
4export default function ValidationExample() {
5  return (
6    <div className="space-y-6">
7      <div className="space-y-2">
8        <Label htmlFor="valid">نظر شما</Label>
9        <Textarea
10          id="valid"
11          placeholder="نظر خود را بنویسید..."
12          className="border-green-500 focus-visible:ring-green-500"
13          defaultValue="این یک ورودی معتبر است"
14        />
15        <p className="text-sm text-green-600">نظر شما با موفقیت ذخیره شد!</p>
16      </div>
17
18      <div className="space-y-2">
19        <Label htmlFor="invalid">توضیحات</Label>
20        <Textarea
21          id="invalid"
22          placeholder="لطفا توضیحات وارد کنید..."
23          aria-invalid="true"
24          className="border-destructive focus-visible:ring-destructive"
25        />
26        <p className="text-sm text-destructive">
27          لطفا حداقل 10 کاراکتر وارد کنید
28        </p>
29      </div>
30    </div>
31  );
32}
33

1import { Textarea } from "@/components/ui/textarea";
2
3export default function ResizeExample() {
4  return (
5    <div className="space-y-6">
6      <div className="grid w-full gap-2">
7        <h3 className="text-sm font-medium">تغییر اندازه عمودی (Vertical Resize)</h3>
8        <Textarea
9          placeholder="می‌توانید ارتفاع را تغییر دهید..."
10          className="resize-y"
11        />
12      </div>
13
14      <div className="grid w-full gap-2">
15        <h3 className="text-sm font-medium">بدون تغییر اندازه (No Resize)</h3>
16        <Textarea
17          placeholder="اندازه ثابت است..."
18          className="resize-none"
19        />
20      </div>
21
22      <div className="grid w-full gap-2">
23        <h3 className="text-sm font-medium">تغییر اندازه در دو جهت (Both Directions)</h3>
24        <Textarea
25          placeholder="می‌توانید عرض و ارتفاع را تغییر دهید..."
26          className="resize"
27        />
28      </div>
29    </div>
30  );
31}
32