Empty

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@workspace/ui/components/empty"
import { Button } from "@workspace/ui/components/button"
import { FolderPlusIcon } from "@phosphor-icons/react"

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FolderPlusIcon />
    </EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>
      You haven't created any projects yet. Get started by creating
      your first one.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <div className="flex gap-2">
      <Button size="sm">Create project</Button>
      <Button variant="outline" size="sm">
        Import
      </Button>
    </div>
  </EmptyContent>
</Empty>

<Empty className="border">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <CloudArrowUpIcon />
    </EmptyMedia>
    <EmptyTitle>Cloud storage is empty</EmptyTitle>
    <EmptyDescription>
      Upload files to your cloud storage to access them anywhere.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="outline" size="sm">
      Upload files
    </Button>
  </EmptyContent>
</Empty>

<Empty className="border bg-muted/30">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <BellSlashIcon />
    </EmptyMedia>
    <EmptyTitle>No notifications</EmptyTitle>
    <EmptyDescription>
      You're all caught up. New notifications will appear here.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="outline" size="sm">
      Notification settings
    </Button>
  </EmptyContent>
</Empty>

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@workspace/ui/components/avatar"

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="default">
      <Avatar className="size-12">
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
    </EmptyMedia>
    <EmptyTitle>@shadcn is offline</EmptyTitle>
    <EmptyDescription>
      They will receive your message when they come back online.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm">Leave a message</Button>
  </EmptyContent>
</Empty>

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from "@workspace/ui/components/avatar"
import { UserPlusIcon } from "@phosphor-icons/react"

<Empty>
  <EmptyHeader>
    <EmptyMedia>
      <AvatarGroup>
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/vercel.png" alt="@vercel" />
          <AvatarFallback>VC</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
      </AvatarGroup>
    </EmptyMedia>
    <EmptyTitle>No team members</EmptyTitle>
    <EmptyDescription>
      Invite your team to start collaborating on this project.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm">
      <UserPlusIcon />
      Invite members
    </Button>
  </EmptyContent>
</Empty>

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@workspace/ui/components/input-group"
import { Kbd } from "@workspace/ui/components/kbd"
import { MagnifyingGlassIcon } from "@phosphor-icons/react"

<Empty>
  <EmptyHeader>
    <EmptyTitle>404 — Page not found</EmptyTitle>
    <EmptyDescription>
      The page you're looking for doesn't exist. Try searching instead.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <InputGroup className="sm:w-3/4">
      <InputGroupInput placeholder="Try searching for pages..." />
      <InputGroupAddon>
        <MagnifyingGlassIcon />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <Kbd>/</Kbd>
      </InputGroupAddon>
    </InputGroup>
    <EmptyDescription>
      Need help? <a href="#">Contact support</a>
    </EmptyDescription>
  </EmptyContent>
</Empty>

<div dir="rtl">
  <Empty className="border">
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <FolderPlusIcon />
      </EmptyMedia>
      <EmptyTitle>لا توجد مشاريع بعد</EmptyTitle>
      <EmptyDescription>
        لم تنشئ أي مشروع بعد. ابدأ بإنشاء مشروعك الأول.
      </EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
      <Button size="sm">إنشاء مشروع</Button>
    </EmptyContent>
  </Empty>
</div>