کارت (Card)

1import {
2  Card,
3  CardHeader,
4  CardTitle,
5  CardDescription,
6  CardContent,
7  CardFooter,
8} from "@/components/ui/card";
9import { Button } from "@/components/ui/button";
10
11export default function BasicCard() {
12  return (
13    <Card className="max-w-sm">
14      <CardHeader>
15        <CardTitle>عنوان کارت</CardTitle>
16        <CardDescription>توضیحات کارت در اینجا نمایش داده می‌شود.</CardDescription>
17      </CardHeader>
18      <CardContent>
19        <p>محتوای اصلی کارت در این بخش قرار می‌گیرد.</p>
20      </CardContent>
21      <CardFooter>
22        <Button>اقدام</Button>
23      </CardFooter>
24    </Card>
25  );
26}

1<Card size="sm">
2  <CardHeader>
3    <CardTitle>کارت کوچک</CardTitle>
4    <CardDescription>این کارت از اندازه کوچک استفاده می‌کند.</CardDescription>
5  </CardHeader>
6  <CardContent>
7    <p>فاصله‌گذاری کمتر برای فضای محدود</p>
8  </CardContent>
9  <CardFooter>
10    <Button variant="outline" size="sm">مشاهده</Button>
11  </CardFooter>
12</Card>

1import { MoreHorizontal } from "lucide-react";
2
3<Card className="max-w-md">
4  <CardHeader>
5    <CardTitle>تنظیمات حساب</CardTitle>
6    <CardDescription>اطلاعات حساب کاربری خود را مدیریت کنید.</CardDescription>
7    <CardAction>
8      <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
9        <MoreHorizontal className="h-4 w-4" />
10      </Button>
11    </CardAction>
12  </CardHeader>
13  <CardContent>
14    <p>در این بخش می‌توانید نام، ایمیل و رمز عبور خود را تغییر دهید.</p>
15  </CardContent>
16  <CardFooter className="gap-2">
17    <Button>ذخیره تغییرات</Button>
18    <Button variant="outline">انصراف</Button>
19  </CardFooter>
20</Card>

1import { Calendar, MapPin } from "lucide-react";
2import { Badge,Button,Card,CardHeader,CardTitle,CardDescription,CardContent,CardFooter } from "@/components/ui";
3
4<Card className="max-w-sm overflow-hidden">
5  <img
6    src="/event-image.jpg"
7    alt="تصویر رویداد"
8    className="aspect-video w-full object-cover"
9  />
10  <CardHeader>
11    <div className="flex items-center gap-2 mb-2">
12      <Badge variant="secondary">ویژه</Badge>
13    </div>
14    <CardTitle>همایش طراحی سیستم</CardTitle>
15    <CardDescription>
16      یک گفتگوی عملی درباره API کامپوننت‌ها، دسترسی‌پذیری و ارسال سریع‌تر.
17    </CardDescription>
18  </CardHeader>
19  <CardContent>
20    <div className="flex flex-col gap-2 text-sm text-muted-foreground">
21      <div className="flex items-center gap-2">
22        <Calendar className="h-4 w-4" />
23        <span>۲۵ اسفند ۱۴۰۴</span>
24      </div>
25      <div className="flex items-center gap-2">
26        <MapPin className="h-4 w-4" />
27        <span>تهران، ایران</span>
28      </div>
29    </div>
30  </CardContent>
31  <CardFooter>
32    <Button className="w-full">مشاهده رویداد</Button>
33  </CardFooter>
34</Card>

1<Card className="w-full max-w-sm">
2  <CardHeader>
3    <CardTitle>ورود به حساب</CardTitle>
4    <CardDescription>
5      ایمیل خود را وارد کنید تا وارد حساب کاربری شوید.
6    </CardDescription>
7  </CardHeader>
8  <CardContent className="space-y-4">
9    <div className="space-y-2">
10      <label className="text-sm font-medium">ایمیل</label>
11      <input
12        type="email"
13        placeholder="example@email.com"
14        className="w-full px-3 py-2 border border-border rounded-md"
15        dir="ltr"
16      />
17    </div>
18    <div className="space-y-2">
19      <div className="flex items-center justify-between">
20        <label className="text-sm font-medium">رمز عبور</label>
21        <a href="#" className="text-sm text-primary hover:underline">
22          فراموشی رمز عبور؟
23        </a>
24      </div>
25      <input
26        type="password"
27        className="w-full px-3 py-2 border border-border rounded-md"
28        dir="ltr"
29      />
30    </div>
31  </CardContent>
32  <CardFooter className="flex-col gap-4">
33    <Button className="w-full">ورود</Button>
34    <p className="text-sm text-muted-foreground text-center">
35      حساب ندارید؟{" "}
36      <a href="#" className="text-primary hover:underline">
37        ثبت‌نام کنید
38      </a>
39    </p>
40  </CardFooter>
41</Card>

1import {
2  Card,
3  CardHeader,
4  CardTitle,
5  CardDescription,
6  CardAction,
7  CardContent,
8  CardFooter,
9} from "@/components/ui/card";
10import { Button } from "@/components/ui/button";
11
12export default function MyComponent() {
13  return (
14    <Card>
15      <CardHeader>
16        <CardTitle>عنوان کارت</CardTitle>
17        <CardDescription>توضیحات کارت</CardDescription>
18        <CardAction>
19          <Button variant="ghost" size="sm">...</Button>
20        </CardAction>
21      </CardHeader>
22      <CardContent>
23        <p>محتوای کارت</p>
24      </CardContent>
25      <CardFooter>
26        <Button>اقدام</Button>
27      </CardFooter>
28    </Card>
29  );
30}