{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar-lg-03",
  "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/button.json",
    "https://wigggle-ui.vercel.app/r/avatar.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/calendar/lg/calendar-03.tsx",
      "content": "import React from \"react\";\nimport { ChevronLeftIcon, ChevronRightIcon } 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 { Button } from \"@/registry/default/ui/button\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function WidgetDemo() {\n  const now = new Date();\n\n  const monthName = now.toLocaleDateString(\"en-US\", { month: \"long\" });\n  const date = now.getDate();\n\n  const [selectedDate, setSelectedDate] = React.useState<number>(now.getDate());\n\n  const weekDates = Array.from(\n    { length: 7 },\n    (_, i) =>\n      new Date(\n        now.getFullYear(),\n        now.getMonth(),\n        now.getDate() - now.getDay() + i,\n      ),\n  );\n\n  const lowerLimit = now.getDate() - 3;\n  const upperLimit = now.getDate() + 3;\n\n  const allTasks = [\n    {\n      imageURL: \"https://avatars.githubusercontent.com/u/6751787?v=4\",\n      title: \"Teach Theo Elixir\",\n      time: \"8:30 AM\",\n    },\n    {\n      imageURL: \"https://avatars.githubusercontent.com/u/124599?v=4\",\n      title: \"Meeting with ShadCN\",\n      time: \"12:30 PM\",\n    },\n    {\n      imageURL: \"https://owcdn.net/img/62bbebb185a7e.png\",\n      title: \"PRX vs G2\",\n      time: \"3:30 PM\",\n    },\n    {\n      imageURL: \"https://avatars.githubusercontent.com/u/7549148?v=4\",\n      title: \"Warcraft with Orc! ⚔️\",\n      time: \"7:30 PM\",\n    },\n    {\n      imageURL: \"https://avatars.githubusercontent.com/u/23276437?v=4\",\n      title: \"Teaching Tailwind\",\n      time: \"10:00 AM\",\n    },\n    {\n      imageURL: \"https://avatars.githubusercontent.com/u/14985020?s=200&v=4\",\n      title: \"Wigggle UI Vercel OSS\",\n      time: \"4:30 PM\",\n    },\n  ];\n\n  const getRandomTasks = () => {\n    const count = Math.random() > 0.5 ? 2 : 3;\n    const indices = new Set<number>();\n    while (indices.size < count) {\n      indices.add(Math.floor(Math.random() * allTasks.length));\n    }\n    return Array.from(indices).map((i) => allTasks[i]);\n  };\n\n  const tasks = getRandomTasks();\n\n  return (\n    <Widget size=\"lg\" className=\"p-0\">\n      <WidgetHeader className=\"bg-destructive rounded-t-3xl p-4\">\n        <WidgetTitle className=\"w-max text-center text-2xl\">\n          {date} {monthName}\n        </WidgetTitle>\n        <Button\n          onClick={() => {\n            setSelectedDate(now.getDate());\n          }}\n          variant=\"secondary\"\n          size=\"sm\"\n        >\n          Today\n        </Button>\n      </WidgetHeader>\n      <WidgetContent className=\"flex-col items-center justify-start gap-4 p-4\">\n        <div className=\"flex w-full items-center justify-between gap-2\">\n          <Button\n            onClick={() => {\n              selectedDate > lowerLimit\n                ? setSelectedDate(selectedDate - 1)\n                : setSelectedDate(lowerLimit);\n            }}\n            variant=\"outline\"\n            size=\"icon-sm\"\n          >\n            <ChevronLeftIcon />\n          </Button>\n          <div className=\"grid w-full grid-cols-7 items-center gap-x-4 px-3\">\n            {[\"S\", \"M\", \"T\", \"W\", \"T\", \"F\", \"S\"].map((day, i) => (\n              <Label\n                key={`weekday-${i}-${day}`}\n                className=\"text-muted-foreground mx-auto text-sm\"\n              >\n                {day}\n              </Label>\n            ))}\n            {weekDates.map((d, i) => {\n              const isToday = d.getDate() === selectedDate;\n              return (\n                <Label\n                  key={i}\n                  className={`mx-auto text-xl ${isToday ? \"text-destructive\" : \"\"}`}\n                >\n                  {d.getDate()}\n                </Label>\n              );\n            })}\n          </div>\n          <Button\n            onClick={() => {\n              selectedDate < upperLimit\n                ? setSelectedDate(selectedDate + 1)\n                : setSelectedDate(upperLimit);\n            }}\n            variant=\"outline\"\n            size=\"icon-sm\"\n          >\n            <ChevronRightIcon />\n          </Button>\n        </div>\n        {tasks.map((el) => (\n          <div\n            key={el.title}\n            className=\"flex w-full items-center justify-start gap-x-4 pb-3 not-last:border-b-2\"\n          >\n            <Avatar size=\"lg\">\n              <AvatarImage src={el.imageURL} alt={el.title} />\n              <AvatarFallback>{el.title.slice(0, 1)}</AvatarFallback>\n            </Avatar>\n            <div className=\"space-y-1\">\n              <Label className=\"text-base\">{el.title}</Label>\n              <Label className=\"text-muted-foreground font-normal\">\n                {el.time}\n              </Label>\n            </div>\n          </div>\n        ))}\n      </WidgetContent>\n    </Widget>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "calendar"
    ],
    "size": "lg"
  }
}