نشان (Badge)

1import { Badge } from "@/components/ui/badge";
2import { Check, X, Clock, AlertCircle } from "lucide-react";
3
4export default function StatusExample() {
5  return (
6    <div className="space-y-4">
7      <div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
8        <span className="text-sm">سفارش #1234</span>
9        <Badge variant="default" className="gap-1">
10          <Check className="h-3 w-3" />
11          تحویل داده شده
12        </Badge>
13      </div>
14      <div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
15        <span className="text-sm">سفارش #1235</span>
16        <Badge variant="secondary" className="gap-1">
17          <Clock className="h-3 w-3" />
18          در حال پردازش
19        </Badge>
20      </div>
21      <div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
22        <span className="text-sm">سفارش #1236</span>
23        <Badge variant="destructive" className="gap-1">
24          <X className="h-3 w-3" />
25          لغو شده
26        </Badge>
27      </div>
28      <div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
29        <span className="text-sm">سفارش #1237</span>
30        <Badge
31          variant="outline"
32          className="gap-1 bg-yellow-50 dark:bg-yellow-950 border-yellow-300"
33        >
34          <AlertCircle className="h-3 w-3" />
35          نیاز به بررسی
36        </Badge>
37      </div>
38    </div>
39  );
40}
41

1import { Badge } from "@/components/ui/badge";
2import { Mail, Bell } from "lucide-react";
3
4export default function NotificationExample() {
5  return (
6    <div className="flex flex-wrap gap-6">
7      <div className="relative">
8        <Mail className="h-6 w-6" />
9        <Badge className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0 text-[10px]">
10          5
11        </Badge>
12      </div>
13      <div className="relative">
14        <Bell className="h-6 w-6" />
15        <Badge className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0 text-[10px]">
16          12
17        </Badge>
18      </div>
19      <div className="relative inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-muted">
20        <span className="text-sm">پیام‌ها</span>
21        <Badge variant="destructive">3</Badge>
22      </div>
23    </div>
24  );
25}
26

1import { Badge } from "@/components/ui/badge";
2import { Sparkles, Tag } from "lucide-react";
3
4export default function ProductCardExample() {
5  return (
6    <div className="grid md:grid-cols-2 gap-6">
7      <div className="p-4 rounded-lg border border-border">
8        <div className="flex items-start justify-between mb-3">
9          <h4 className="font-semibold">هدفون بی‌سیم</h4>
10          <Badge variant="default" className="gap-1">
11            <Sparkles className="h-3 w-3" />
12            جدید
13          </Badge>
14        </div>
15        <p className="text-sm text-muted-foreground mb-3">
16          کیفیت صدای عالی با نویز کنسلینگ
17        </p>
18        <div className="flex items-center gap-2">
19          <Badge variant="outline" className="gap-1">
20            <Tag className="h-3 w-3" />
21            الکترونیک
22          </Badge>
23          <Badge className="bg-green-500 text-white">موجود</Badge>
24        </div>
25      </div>
26
27      <div className="p-4 rounded-lg border border-border">
28        <div className="flex items-start justify-between mb-3">
29          <h4 className="font-semibold">کفش ورزشی</h4>
30          <Badge variant="destructive">50% تخفیف</Badge>
31        </div>
32        <p className="text-sm text-muted-foreground mb-3">
33          راحتی بی‌نظیر برای ورزش روزانه
34        </p>
35        <div className="flex items-center gap-2">
36          <Badge variant="outline" className="gap-1">
37            <Tag className="h-3 w-3" />
38            پوشاک
39          </Badge>
40          <Badge
41            variant="secondary"
42            className="bg-orange-100 text-orange-800 dark:bg-orange-950 dark:text-orange-200"
43          >
44            تعداد محدود
45          </Badge>
46        </div>
47      </div>
48    </div>
49  );
50}
51

1import { Badge } from "@/components/ui/badge";
2import { Check, Star, Sparkles } from "lucide-react";
3
4export default function UserListExample() {
5  return (
6    <div className="space-y-3">
7      <div className="flex items-center gap-3">
8        <div className="h-10 w-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500" />
9        <div className="flex-1">
10          <div className="flex items-center gap-2">
11            <span className="font-medium">علی محمدی</span>
12            <Badge variant="default" className="gap-1 bg-blue-500 text-white">
13              <Check className="h-3 w-3" />
14              تایید شده
15            </Badge>
16          </div>
17          <p className="text-sm text-muted-foreground">
18            توسعه‌دهنده فرانت‌اند
19          </p>
20        </div>
21      </div>
22
23      <div className="flex items-center gap-3">
24        <div className="h-10 w-10 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500" />
25        <div className="flex-1">
26          <div className="flex items-center gap-2">
27            <span className="font-medium">سارا احمدی</span>
28            <Badge
29              variant="outline"
30              className="gap-1 bg-purple-50 dark:bg-purple-950 border-purple-300"
31            >
32              <Star className="h-3 w-3" />
33              Pro
34            </Badge>
35          </div>
36          <p className="text-sm text-muted-foreground">طراح UI/UX</p>
37        </div>
38      </div>
39
40      <div className="flex items-center gap-3">
41        <div className="h-10 w-10 rounded-full bg-gradient-to-br from-green-500 to-emerald-500" />
42        <div className="flex-1">
43          <div className="flex items-center gap-2">
44            <span className="font-medium">رضا کریمی</span>
45            <Badge
46              variant="secondary"
47              className="gap-1 bg-yellow-100 text-yellow-800 dark:bg-yellow-950 dark:text-yellow-200"
48            >
49              <Sparkles className="h-3 w-3" />
50              مدیر
51            </Badge>
52          </div>
53          <p className="text-sm text-muted-foreground">مدیر محصول</p>
54        </div>
55      </div>
56    </div>
57  );
58}
59