ناحیه اسکرول (Scroll Area)

1import { ScrollArea } from "@/components/ui/scroll-area";
2import { Separator } from "@/components/ui/separator";
3
4const tags = Array.from({ length: 50 }).map((_, i) => `نسخه ${i + 1}`);
5
6export default function BasicExample() {
7  return (
8    <ScrollArea className="h-72 w-48 rounded-md border">
9      <div className="p-4">
10        <h4 className="mb-4 text-sm font-medium leading-none">برچسب‌ها</h4>
11        {tags.map((tag) => (
12          <div key={tag}>
13            <div className="text-sm">{tag}</div>
14            <Separator className="my-2" />
15          </div>
16        ))}
17      </div>
18    </ScrollArea>
19  );
20}
21

1import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
2import { Badge } from "@/components/ui/badge";
3
4const badges = [
5  "جاوااسکریپت",
6  "تایپ‌اسکریپت",
7  "ری‌اکت",
8  "نکست",
9  "تیلویند",
10  "نود",
11  "پایتون",
12  "گو",
13];
14
15export default function HorizontalExample() {
16  return (
17    <ScrollArea className="w-72 rounded-md border whitespace-nowrap">
18      <div className="flex w-max gap-3 p-4">
19        {badges.map((badge) => (
20          <Badge key={badge} variant="secondary">
21            {badge}
22          </Badge>
23        ))}
24      </div>
25      <ScrollBar orientation="horizontal" />
26    </ScrollArea>
27  );
28}
29

1import { ScrollArea } from "@/components/ui/scroll-area";
2
3export default function StyledExample() {
4  return (
5    <ScrollArea
6      className="h-72 w-48 rounded-md border"
7      scrollbarThumbClassName="bg-primary hover:bg-primary/80"
8    >
9      <div className="p-4">
10        {Array.from({ length: 30 }).map((_, i) => (
11          <div key={i} className="mb-2 text-sm">
12            آیتم شماره {i + 1}
13          </div>
14        ))}
15      </div>
16    </ScrollArea>
17  );
18}
19

1import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
2
3export default function BothScrollbarsExample() {
4  return (
5    <ScrollArea className="h-72 w-72 rounded-md border">
6      <div className="p-4 w-[500px]">
7        {Array.from({ length: 20 }).map((_, i) => (
8          <div key={i} className="mb-4">
9            <p className="whitespace-nowrap">
10              این یک متن طولانی است که نیاز به اسکرول افقی دارد - ردیف {i + 1}
11            </p>
12          </div>
13        ))}
14      </div>
15      <ScrollBar orientation="horizontal" />
16      <ScrollBar orientation="vertical" />
17    </ScrollArea>
18  );
19}
20

1import { ScrollArea } from "@/components/ui/scroll-area";
2
3export default function HiddenScrollbarExample() {
4  return (
5    <ScrollArea className="h-72 w-48 rounded-md border" hideScrollbar>
6      <div className="p-4">
7        {Array.from({ length: 30 }).map((_, i) => (
8          <div key={i} className="mb-2 text-sm">
9            آیتم شماره {i + 1}
10          </div>
11        ))}
12      </div>
13    </ScrollArea>
14  );
15}
16