{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar-lg-06",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/widget.json",
    "https://wigggle-ui.vercel.app/r/label.json",
    "https://wigggle-ui.vercel.app/r/badge.json",
    "https://wigggle-ui.vercel.app/r/button.json",
    "https://wigggle-ui.vercel.app/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/calendar/lg/calendar-06.tsx",
      "content": "import { PlusIcon } from \"lucide-react\";\n\nimport {\n  Widget,\n  WidgetContent,\n  WidgetHeader,\n  WidgetTitle,\n} from \"@/registry/default/ui/widget\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport default function WidgetDemo() {\n  const now = new Date();\n\n  const dayName = now.toLocaleDateString(\"en-US\", { weekday: \"long\" });\n  const monthName = now.toLocaleDateString(\"en-US\", { month: \"long\" });\n  const date = now.getDate();\n\n  const events = [\n    {\n      title: \"Apartment cleaning\",\n      time: \"9:00 - 10:00 AM\",\n      color: \"border-blue-500\",\n      category: \"home\",\n    },\n    {\n      title: \"Pickeball\",\n      time: \"11:00 - 1:00 PM\",\n      color: \"border-yellow-500\",\n      category: \"sport\",\n    },\n    {\n      title: \"Design New Widgets\",\n      time: \"1:45 - 3:45 PM\",\n      color: \"border-green-500\",\n      category: \"work\",\n    },\n  ];\n\n  return (\n    <Widget size=\"lg\" className=\"gap-3\">\n      <WidgetHeader className=\"items-center justify-between gap-4\">\n        <div className=\"flex space-x-4\">\n          <WidgetTitle className=\"text-6xl\">{date}</WidgetTitle>\n          <div className=\"flex h-full flex-col items-start justify-between py-1\">\n            <Label className=\"text-xl\">{dayName}</Label>\n            <Label className=\"text-muted-foreground text-base\">\n              {monthName}\n            </Label>\n          </div>\n        </div>\n        <Button variant=\"outline\" size=\"sm\">\n          <PlusIcon /> Add Event\n        </Button>\n      </WidgetHeader>\n      <WidgetContent className=\"flex-col items-center justify-start gap-4\">\n        {events.map((el) => (\n          <div\n            key={el.title}\n            className=\"flex w-full items-center justify-between\"\n          >\n            <div className={cn(el.color, \"space-y-0.5 border-l-4 ps-3\")}>\n              <Label className=\"text-base\">{el.title}</Label>\n              <Label className=\"text-muted-foreground text-sm\">{el.time}</Label>\n            </div>\n            <Badge variant=\"secondary\" className=\"text-sm\">\n              {el.category}\n            </Badge>\n          </div>\n        ))}\n      </WidgetContent>\n    </Widget>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "calendar"
    ],
    "size": "lg"
  }
}