Empty

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyMediaIcon,
  EmptyTitle,
} from "@/components/ui/empty";
import { BookOpenIcon } from "@/components/ui/icons";

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <EmptyMediaIcon>
        <BookOpenIcon />
      </EmptyMediaIcon>
    </EmptyMedia>
    <EmptyTitle>No Projects Found</EmptyTitle>
    <EmptyDescription>
      You haven't created any projects yet. Get started by creating your
      first project.
    </EmptyDescription>
  </EmptyHeader>
</Empty>

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <EmptyMediaIcon>
        <BookOpenIcon />
      </EmptyMediaIcon>
    </EmptyMedia>
    <EmptyTitle>No Projects Found</EmptyTitle>
    <EmptyDescription>
      You haven't created any projects yet.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button className="w-fit" size="sm">
      Create Project
    </Button>
  </EmptyContent>
</Empty>