Empty

import { InboxIcon, StarIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"

export default function EmptyDemo() {
  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
      <Empty className="bg-mac-window shadow-[0_0_0_1px_var(--mac-grid)]">
        <EmptyHeader>
          <EmptyMedia>
            <InboxIcon strokeWidth={1.25} />
          </EmptyMedia>
          <EmptyTitle>No Messages</EmptyTitle>
          <EmptyDescription>Messages you receive appear here.</EmptyDescription>
        </EmptyHeader>
      </Empty>
      <Empty className="bg-mac-window shadow-[0_0_0_1px_var(--mac-grid)]">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <StarIcon />
          </EmptyMedia>
          <EmptyTitle>No Favorites</EmptyTitle>
          <EmptyDescription>Add websites you visit often to your favorites.</EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button variant="secondary" size="sm">Add Favorite</Button>
        </EmptyContent>
      </Empty>
    </div>
  )
}