{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-empty-20","type":"registry:block","title":"No events empty state with calendar illustration","description":"No events empty state with calendar illustration","dependencies":[],"registryDependencies":["button","empty"],"files":[{"path":"c-empty-20.tsx","type":"registry:block","content":"import { Button } from \"@/components/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\"\n\nfunction CalendarIllustration() {\n  return (\n    <svg\n      width=\"160\"\n      height=\"140\"\n      viewBox=\"0 0 160 140\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      {/* Calendar body */}\n      <rect\n        x=\"24\"\n        y=\"28\"\n        width=\"112\"\n        height=\"96\"\n        rx=\"10\"\n        className=\"fill-background stroke-border\"\n        strokeWidth=\"1.5\"\n      />\n\n      {/* Calendar header bar */}\n      <rect\n        x=\"24\"\n        y=\"28\"\n        width=\"112\"\n        height=\"24\"\n        rx=\"10\"\n        className=\"fill-muted dark:fill-muted/60\"\n      />\n      <rect\n        x=\"24\"\n        y=\"42\"\n        width=\"112\"\n        height=\"10\"\n        className=\"fill-muted dark:fill-muted/60\"\n      />\n\n      {/* Calendar hooks */}\n      <line\n        x1=\"56\"\n        y1=\"20\"\n        x2=\"56\"\n        y2=\"36\"\n        className=\"stroke-muted-foreground/30\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n      />\n      <line\n        x1=\"104\"\n        y1=\"20\"\n        x2=\"104\"\n        y2=\"36\"\n        className=\"stroke-muted-foreground/30\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n      />\n\n      {/* Day dots - row 1 */}\n      <circle cx=\"48\" cy=\"68\" r=\"4\" className=\"fill-muted-foreground/10\" />\n      <circle cx=\"68\" cy=\"68\" r=\"4\" className=\"fill-muted-foreground/10\" />\n      <circle cx=\"88\" cy=\"68\" r=\"4\" className=\"fill-muted-foreground/10\" />\n      <circle cx=\"108\" cy=\"68\" r=\"4\" className=\"fill-muted-foreground/10\" />\n\n      {/* Day dots - row 2 */}\n      <circle cx=\"48\" cy=\"86\" r=\"4\" className=\"fill-muted-foreground/10\" />\n      <circle cx=\"68\" cy=\"86\" r=\"4\" className=\"fill-muted-foreground/10\" />\n      <circle cx=\"88\" cy=\"86\" r=\"4\" className=\"fill-primary/25\" />\n      <circle cx=\"88\" cy=\"86\" r=\"2\" className=\"fill-primary\" />\n      <circle cx=\"108\" cy=\"86\" r=\"4\" className=\"fill-muted-foreground/10\" />\n\n      {/* Day dots - row 3 */}\n      <circle cx=\"48\" cy=\"104\" r=\"4\" className=\"fill-muted-foreground/10\" />\n      <circle cx=\"68\" cy=\"104\" r=\"4\" className=\"fill-muted-foreground/10\" />\n      <circle cx=\"88\" cy=\"104\" r=\"4\" className=\"fill-muted-foreground/10\" />\n      <circle cx=\"108\" cy=\"104\" r=\"4\" className=\"fill-muted-foreground/10\" />\n\n      {/* Floating decoration */}\n      <circle cx=\"14\" cy=\"70\" r=\"2\" className=\"fill-muted-foreground/10\" />\n      <circle cx=\"148\" cy=\"56\" r=\"2.5\" className=\"fill-primary/10\" />\n      <circle cx=\"146\" cy=\"100\" r=\"1.5\" className=\"fill-muted-foreground/8\" />\n    </svg>\n  )\n}\n\nexport function Pattern() {\n  return (\n    <div className=\"flex items-center justify-center p-4\">\n      <Empty className=\"py-12\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <CalendarIllustration />\n          </EmptyMedia>\n          <EmptyTitle>No upcoming events</EmptyTitle>\n          <EmptyDescription>\n            Your schedule is clear. Create an event to get started.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Create event</Button>\n        </EmptyContent>\n      </Empty>\n    </div>\n  )\n}","target":"components/examples/c-empty-20.tsx"}],"meta":{"order":20}}