خالی (Empty)

1import {
2  Empty,
3  EmptyHeader,
4  EmptyMedia,
5  EmptyTitle,
6  EmptyDescription,
7  EmptyContent,
8} from "@/components/ui/empty";
9import { Button } from "@/components/ui/button";
10import { FolderOpen } from "lucide-react";
11
12export default function BasicEmpty() {
13  return (
14    <Empty>
15      <EmptyHeader>
16        <EmptyMedia variant="icon">
17          <FolderOpen className="h-12 w-12" />
18        </EmptyMedia>
19        <EmptyTitle>هنوز پروژه‌ای ایجاد نشده</EmptyTitle>
20        <EmptyDescription>
21          شما هنوز پروژه‌ای ایجاد نکرده‌اید. برای شروع اولین پروژه خود را ایجاد کنید.
22        </EmptyDescription>
23      </EmptyHeader>
24      <EmptyContent>
25        <Button>ایجاد پروژه</Button>
26      </EmptyContent>
27    </Empty>
28  );
29}

1import {
2  Empty,
3  EmptyHeader,
4  EmptyMedia,
5  EmptyTitle,
6  EmptyDescription,
7  EmptyContent,
8} from "@/components/ui/empty";
9import { Button } from "@/components/ui/button";
10import { UploadCloud } from "lucide-react";
11
12export default function OutlineEmpty() {
13  return (
14    <Empty className="border rounded-lg p-8">
15      <EmptyHeader>
16        <EmptyMedia variant="icon">
17          <UploadCloud className="h-12 w-12" />
18        </EmptyMedia>
19        <EmptyTitle>فضای ذخیره‌سازی ابری خالی</EmptyTitle>
20        <EmptyDescription>
21          فایل‌های خود را در فضای ذخیره‌سازی ابری آپلود کنید تا در هر کجا به آن‌ها دسترسی داشته باشید.
22        </EmptyDescription>
23      </EmptyHeader>
24      <EmptyContent>
25        <Button>آپلود فایل</Button>
26      </EmptyContent>
27    </Empty>
28  );
29}

1import {
2  Empty,
3  EmptyHeader,
4  EmptyMedia,
5  EmptyTitle,
6  EmptyDescription,
7  EmptyContent,
8} from "@/components/ui/empty";
9import { Button } from "@/components/ui/button";
10import { Bell } from "lucide-react";
11
12export default function BackgroundEmpty() {
13  return (
14    <Empty className="bg-muted/50 rounded-lg p-8">
15      <EmptyHeader>
16        <EmptyMedia variant="icon">
17          <Bell className="h-12 w-12" />
18        </EmptyMedia>
19        <EmptyTitle>هیچ اعلانی وجود ندارد</EmptyTitle>
20        <EmptyDescription>
21          شما همه چیز را به‌روز کرده‌اید. اعلان‌های جدید در اینجا نمایش داده می‌شوند.
22        </EmptyDescription>
23      </EmptyHeader>
24      <EmptyContent>
25        <Button variant="outline">بروزرسانی</Button>
26      </EmptyContent>
27    </Empty>
28  );
29}

1import {
2  Empty,
3  EmptyHeader,
4  EmptyMedia,
5  EmptyTitle,
6  EmptyDescription,
7  EmptyContent,
8} from "@/components/ui/empty";
9import { Avatar, AvatarFallback } from "@/components/ui/avatar";
10import { Button } from "@/components/ui/button";
11
12export default function AvatarEmpty() {
13  return (
14    <Empty>
15      <EmptyHeader>
16        <EmptyMedia>
17          <Avatar className="h-16 w-16">
18            <AvatarFallback>کاربر</AvatarFallback>
19          </Avatar>
20        </EmptyMedia>
21        <EmptyTitle>کاربر آفلاین است</EmptyTitle>
22        <EmptyDescription>
23          این کاربر در حال حاضر آفلاین است. می‌توانید پیامی برای اطلاع‌رسانی به او بگذارید یا بعداً دوباره تلاش کنید.
24        </EmptyDescription>
25      </EmptyHeader>
26      <EmptyContent>
27        <Button variant="outline">گذاشتن پیام</Button>
28      </EmptyContent>
29    </Empty>
30  );
31}

1import {
2  Empty,
3  EmptyHeader,
4  EmptyMedia,
5  EmptyTitle,
6  EmptyDescription,
7  EmptyContent,
8} from "@/components/ui/empty";
9import { Avatar, AvatarFallback } from "@/components/ui/avatar";
10import { Button } from "@/components/ui/button";
11
12export default function AvatarGroupEmpty() {
13  return (
14    <Empty>
15      <EmptyHeader>
16        <EmptyMedia>
17          <div className="flex -space-x-2">
18            <Avatar className="h-12 w-12 border-2 border-background">
19              <AvatarFallback>CN</AvatarFallback>
20            </Avatar>
21            <Avatar className="h-12 w-12 border-2 border-background">
22              <AvatarFallback>LR</AvatarFallback>
23            </Avatar>
24            <Avatar className="h-12 w-12 border-2 border-background">
25              <AvatarFallback>ER</AvatarFallback>
26            </Avatar>
27          </div>
28        </EmptyMedia>
29        <EmptyTitle>هیچ عضو تیمی وجود ندارد</EmptyTitle>
30        <EmptyDescription>
31          اعضای تیم خود را دعوت کنید تا در این پروژه همکاری کنند.
32        </EmptyDescription>
33      </EmptyHeader>
34      <EmptyContent>
35        <Button>دعوت اعضا</Button>
36      </EmptyContent>
37    </Empty>
38  );
39}

1import {
2  Empty,
3  EmptyHeader,
4  EmptyMedia,
5  EmptyTitle,
6  EmptyDescription,
7  EmptyContent,
8} from "@/components/ui/empty";
9import {
10  InputGroup,
11  InputGroupInput,
12  InputGroupButton,
13} from "@/components/ui/input-group";
14import { Search } from "lucide-react";
15
16export default function InputGroupEmpty() {
17  return (
18    <Empty>
19      <EmptyHeader>
20        <EmptyMedia variant="icon">
21          <Search className="h-12 w-12" />
22        </EmptyMedia>
23        <EmptyTitle>404 - صفحه یافت نشد</EmptyTitle>
24        <EmptyDescription>
25          صفحه‌ای که به دنبال آن هستید وجود ندارد. در زیر جستجو کنید.
26        </EmptyDescription>
27      </EmptyHeader>
28      <EmptyContent>
29        <InputGroup className="max-w-md">
30          <InputGroupInput placeholder="جستجو..." />
31          <InputGroupButton size="icon-sm">
32            <Search className="h-4 w-4" />
33          </InputGroupButton>
34        </InputGroup>
35        <p className="text-sm text-muted-foreground mt-4">
36          نیاز به کمک دارید؟{" "}
37          <a href="#" className="underline">
38            با پشتیبانی تماس بگیرید
39          </a>
40        </p>
41      </EmptyContent>
42    </Empty>
43  );
44}