Empty

import { InboxIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";

<Empty className="w-full max-w-md">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <InboxIcon />
    </EmptyMedia>
    <EmptyTitle>No messages yet</EmptyTitle>
    <EmptyDescription>
      You don't have any messages yet. Start a conversation to see it
      here.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm">Start a conversation</Button>
  </EmptyContent>
</Empty>