کارت پیش نمایش (Hover Card)

1import {
2  HoverCard,
3  HoverCardContent,
4  HoverCardTrigger,
5} from "@/components/ui/hover-card";
6import { Button } from "@/components/ui/button";
7
8export default function BasicExample() {
9  return (
10    <HoverCard>
11      <HoverCardTrigger asChild>
12        <Button variant="link">@radui</Button>
13      </HoverCardTrigger>
14      <HoverCardContent className="w-80">
15        <div className="flex flex-col gap-2">
16          <div className="font-semibold">@radui</div>
17          <p className="text-sm text-muted-foreground">
18            کتابخانه کامپوننت RTL-first با تم‌های ایرانی
19          </p>
20          <div className="text-xs text-muted-foreground">
21            عضویت: آذر ۱۴۰۳
22          </div>
23        </div>
24      </HoverCardContent>
25    </HoverCard>
26  );
27}
28

1import {
2  HoverCard,
3  HoverCardContent,
4  HoverCardTrigger,
5} from "@/components/ui/hover-card";
6import { Button } from "@/components/ui/button";
7
8const SIDES = ["top", "bottom", "left", "right"] as const;
9const SIDE_LABELS: Record<(typeof SIDES)[number], string> = {
10  top: "بالا",
11  bottom: "پایین",
12  left: "چپ",
13  right: "راست",
14};
15
16export default function SidesExample() {
17  return (
18    <div className="flex flex-wrap justify-center gap-2">
19      {SIDES.map((side) => (
20        <HoverCard key={side} openDelay={100} closeDelay={100}>
21          <HoverCardTrigger asChild>
22            <Button variant="outline">{SIDE_LABELS[side]}</Button>
23          </HoverCardTrigger>
24          <HoverCardContent side={side}>
25            <div className="flex flex-col gap-1">
26              <h4 className="font-medium">کارت پیش نمایش</h4>
27              <p className="text-sm text-muted-foreground">
28                این کارت در سمت {SIDE_LABELS[side]} نمایش داده می‌شود
29              </p>
30            </div>
31          </HoverCardContent>
32        </HoverCard>
33      ))}
34    </div>
35  );
36}
37

1import {
2  HoverCard,
3  HoverCardContent,
4  HoverCardTrigger,
5} from "@/components/ui/hover-card";
6import { Button } from "@/components/ui/button";
7
8export default function CustomDelayExample() {
9  return (
10    <HoverCard openDelay={200} closeDelay={300}>
11      <HoverCardTrigger asChild>
12        <Button variant="outline">هاور کنید</Button>
13      </HoverCardTrigger>
14      <HoverCardContent>
15        <p>این کارت با تاخیر ۲۰۰ms باز و با تاخیر ۳۰۰ms بسته می‌شود</p>
16      </HoverCardContent>
17    </HoverCard>
18  );
19}
20

1import {
2  HoverCard,
3  HoverCardContent,
4  HoverCardTrigger,
5} from "@/components/ui/hover-card";
6import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
7import { Button } from "@/components/ui/button";
8
9export default function WithAvatarExample() {
10  return (
11    <HoverCard>
12      <HoverCardTrigger asChild>
13        <Button variant="link">@alikawosi</Button>
14      </HoverCardTrigger>
15      <HoverCardContent className="w-80">
16        <div className="flex gap-4">
17          <Avatar>
18            <AvatarImage src="https://github.com/shadcn.png" />
19            <AvatarFallback>AK</AvatarFallback>
20          </Avatar>
21          <div className="flex flex-col gap-1">
22            <h4 className="font-semibold">علی کاوسی</h4>
23            <p className="text-sm text-muted-foreground">
24              توسعه‌دهنده فرانت‌اند
25            </p>
26            <div className="flex items-center gap-2 text-xs text-muted-foreground">
27              <span>۱۲۳ دنبال‌کننده</span>
28              <span>•</span>
29              <span>۴۵ پروژه</span>
30            </div>
31          </div>
32        </div>
33      </HoverCardContent>
34    </HoverCard>
35  );
36}
37