{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar-sm-06",
  "type": "registry:component",
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/widget.json",
    "https://wigggle-ui.vercel.app/r/label.json",
    "https://wigggle-ui.vercel.app/r/button.json",
    "https://wigggle-ui.vercel.app/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/calendar/sm/calendar-06.tsx",
      "content": "import { PlusIcon, VideoIcon } from \"lucide-react\";\r\n\r\nimport { cn } from \"@/registry/default/lib/utils\";\r\n\r\nimport {\r\n  Widget,\r\n  WidgetContent,\r\n  WidgetHeader,\r\n  WidgetTitle,\r\n} from \"@/registry/default/ui/widget\";\r\nimport { Label } from \"@/registry/default/ui/label\";\r\nimport { Button } from \"@/registry/default/ui/button\";\r\n\r\nexport default function WidgetDemo() {\r\n  const now = new Date();\r\n\r\n  const day = now.toLocaleDateString(\"en-US\", { weekday: \"long\" });\r\n  const month = now.toLocaleDateString(\"en-US\", { month: \"long\" });\r\n  const date = now.getDate().toString().padStart(2, \"0\");\r\n\r\n  const events = [\r\n    {\r\n      time: \"7:00 - 8:30 AM\",\r\n      title: \"GYM\",\r\n      action: null,\r\n      borderColor: \"bg-yellow-500\",\r\n    },\r\n    {\r\n      time: \"11:00 - 1:00 PM\",\r\n      title: \"Doc Review\",\r\n      action: null,\r\n      borderColor: \"bg-blue-500\",\r\n    },\r\n    {\r\n      time: \"6:00 PM\",\r\n      title: \"Wigggle Launch\",\r\n      action: VideoIcon,\r\n      borderColor: \"bg-green-500\",\r\n    },\r\n  ];\r\n\r\n  return (\r\n    <Widget design=\"mumbai\" className=\"gap-2\">\r\n      <WidgetHeader className=\"flex items-center justify-between gap-2\">\r\n        <div className=\"flex items-center gap-2\">\r\n          <WidgetTitle className=\"text-3xl\">{date}</WidgetTitle>\r\n          <div className=\"flex flex-col\">\r\n            <Label className=\"text-muted-foreground\">{month}</Label>\r\n            <Label className=\"text-muted-foreground\">{day}</Label>\r\n          </div>\r\n        </div>\r\n        <Button variant=\"outline\" size=\"icon-sm\">\r\n          <PlusIcon />\r\n        </Button>\r\n      </WidgetHeader>\r\n\r\n      <WidgetContent className=\"flex flex-col items-start gap-2\">\r\n        {events.map(({ title, time, borderColor, action: Action }) => (\r\n          <div key={title} className=\"flex w-full items-center justify-between\">\r\n            <div className=\"flex h-full\">\r\n              <div className={cn(\"h-full w-1 rounded-md\", borderColor)} />\r\n              <div className=\"flex flex-col px-2\">\r\n                <Label className=\"text-muted-foreground text-xs\">{time}</Label>\r\n                <Label className=\"text-xs font-normal\">{title}</Label>\r\n              </div>\r\n            </div>\r\n\r\n            {Action && (\r\n              <Button variant=\"outline\" size=\"icon-sm\">\r\n                <Action />\r\n              </Button>\r\n            )}\r\n          </div>\r\n        ))}\r\n      </WidgetContent>\r\n    </Widget>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "calendar"
    ]
  }
}