{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "event-calendar",
  "title": "Event Calendar",
  "description": "component for the Event Calendar",
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "date-fns"
  ],
  "registryDependencies": [
    "button",
    "dialog",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "app/registry/eventcalendar/demoevent.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { ChevronLeft, ChevronRight, Plus, X } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport Image from \"next/image\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  add,\n  eachDayOfInterval,\n  endOfMonth,\n  format,\n  isEqual,\n  isSameMonth,\n  isToday,\n  parse,\n  startOfMonth,\n  startOfWeek,\n  endOfWeek,\n} from \"date-fns\";\n\ninterface Subscription {\n  id: string;\n  name: string;\n  date: number;\n  icon: string;\n  color: string;\n}\ninterface SubscriptionDay {\n  date: Date;\n  subscriptions: Subscription[];\n  isCurrentMonth: boolean;\n}\nfunction EventCalendar() {\n  const [subscriptions, setSubscriptions] = React.useState<Subscription[]>([]);\n  const [currentMonth, setCurrentMonth] = React.useState(\n    format(new Date(), \"MMM-yyyy\"),\n  );\n  const [isAddModalOpen, setIsAddModalOpen] = React.useState(false);\n  const firstDayCurrentMonth = parse(currentMonth, \"MMM-yyyy\", new Date());\n  const days = React.useMemo(() => {\n    const start = startOfWeek(startOfMonth(firstDayCurrentMonth));\n    const end = endOfWeek(endOfMonth(firstDayCurrentMonth));\n    return eachDayOfInterval({ start, end }).map(\n      (day): SubscriptionDay => ({\n        date: day,\n        subscriptions: subscriptions.filter(\n          (subscription) => subscription.date === day.getDate(),\n        ),\n        isCurrentMonth: isSameMonth(day, firstDayCurrentMonth),\n      }),\n    );\n  }, [firstDayCurrentMonth, subscriptions]);\n  function previousMonth() {\n    const firstDayNextMonth = add(firstDayCurrentMonth, { months: -1 });\n    setCurrentMonth(format(firstDayNextMonth, \"MMM-yyyy\"));\n  }\n  function nextMonth() {\n    const firstDayNextMonth = add(firstDayCurrentMonth, { months: 1 });\n    setCurrentMonth(format(firstDayNextMonth, \"MMM-yyyy\"));\n  }\n  const handleAddSubscription = (newSubscription: Omit<Subscription, \"id\">) => {\n    const subscription = { ...newSubscription, id: Date.now().toString() };\n    setSubscriptions([...subscriptions, subscription]);\n  };\n  const handleRemoveSubscription = (id: string) => {\n    setSubscriptions(subscriptions.filter((sub) => sub.id !== id));\n  };\n  return (\n    <div className=\"p-4 mx-auto max-w-3xl\">\n      <div className=\"flex items-center justify-between mb-4\">\n        <div className=\"flex items-center gap-4\">\n          <Button\n            variant=\"outline\"\n            className=\"p-2 opacity-75 hover:opacity-100\"\n            onClick={previousMonth}\n          >\n            <ChevronLeft className=\"w-4 h-4\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            className=\"p-2 opacity-75 hover:opacity-100\"\n            onClick={nextMonth}\n          >\n            <ChevronRight className=\"w-4 h-4\" />\n          </Button>\n          <motion.h2\n            key={currentMonth}\n            initial={{ opacity: 0, y: -20 }}\n            animate={{ opacity: 1, y: 0 }}\n            className=\"text-xl font-semibold\"\n          >\n            {format(firstDayCurrentMonth, \"MMMM yyyy\")}\n          </motion.h2>\n        </div>\n        <Button onClick={() => setIsAddModalOpen(true)}>\n          <Plus className=\"w-4 h-4 mr-2\" />\n          Add Event\n        </Button>\n      </div>\n      <div className=\"grid grid-cols-7 gap-px bg-muted rounded-lg overflow-hidden\">\n        <AnimatePresence mode=\"wait\">\n          {[\"SUN\", \"MON\", \"TUE\", \"WED\", \"THU\", \"FRI\", \"SAT\"].map((day) => (\n            <motion.div\n              key={day}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              className=\"p-2 text-center text-sm font-medium bg-background\"\n            >\n              {day}\n            </motion.div>\n          ))}\n          {days.map((day, dayIdx) => (\n            <motion.div\n              key={format(day.date, \"yyyy-MM-dd\")}\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={{ delay: dayIdx * 0.02 }}\n              className={cn(\n                \"relative p-2 bg-background min-h-[100px]\",\n                !day.isCurrentMonth && \"bg-muted/50\",\n                isEqual(day.date, new Date()) && \"bg-accent\",\n              )}\n            >\n              <time\n                dateTime={format(day.date, \"yyyy-MM-dd\")}\n                className={cn(\n                  \"text-sm\",\n                  isToday(day.date) && \"font-semibold text-primary\",\n                  !day.isCurrentMonth && \"text-muted-foreground\",\n                )}\n              >\n                {format(day.date, \"d\")}\n              </time>\n              <div className=\"space-y-1 mt-1\">\n                {day.subscriptions.map((subscription) => (\n                  <motion.div\n                    key={subscription.id}\n                    whileHover={{ scale: 1.05 }}\n                    className=\"flex items-center gap-1 p-1 rounded bg-background border text-sm group\"\n                    style={{ borderColor: subscription.color }}\n                  >\n                    <div className=\"relative w-4 h-4\">\n                      <Image\n                        src={subscription.icon}\n                        alt={subscription.name}\n                        className=\"rounded-sm object-cover\"\n                        fill\n                      />\n                    </div>\n                    <span className=\"text-xs truncate flex-1\">\n                      {subscription.name}\n                    </span>\n                    <button\n                      onClick={() => handleRemoveSubscription(subscription.id)}\n                      className=\"opacity-0 group-hover:opacity-100 transition-opacity\"\n                    >\n                      <X className=\"w-3 h-3\" />\n                    </button>\n                  </motion.div>\n                ))}\n              </div>\n            </motion.div>\n          ))}\n        </AnimatePresence>\n      </div>\n      <Dialog open={isAddModalOpen} onOpenChange={setIsAddModalOpen}>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Add New Event</DialogTitle>\n          </DialogHeader>\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              const formData = new FormData(e.currentTarget);\n              const name = formData.get(\"name\") as string;\n              const date = parseInt(formData.get(\"date\") as string);\n              const icon = formData.get(\"icon\") as string;\n              const color = formData.get(\"color\") as string;\n              handleAddSubscription({ name, date, icon, color });\n              setIsAddModalOpen(false);\n            }}\n            className=\"space-y-4\"\n          >\n            <div>\n              <Label htmlFor=\"name\">Event Name</Label>\n              <Input placeholder=\"Event Name\" id=\"name\" name=\"name\" required />\n            </div>\n            <div>\n              <Label htmlFor=\"date\">Enter Only Date</Label>\n              <Input\n                id=\"date\"\n                name=\"date\"\n                placeholder=\"Ex - 12\"\n                type=\"number\"\n                min={1}\n                max={31}\n                required\n              />\n            </div>\n            <div>\n              <Label htmlFor=\"icon\">Icon URL</Label>\n              <Input placeholder=\"Icon URL\" id=\"icon\" name=\"icon\" required />\n            </div>\n            <div>\n              <Label htmlFor=\"color\">Color</Label>\n              <Input id=\"color\" name=\"color\" type=\"color\" required />\n            </div>\n            <Button type=\"submit\">Add Event</Button>\n          </form>\n        </DialogContent>\n      </Dialog>\n    </div>\n  );\n}\n\nexport default EventCalendar;\n",
      "type": "registry:component",
      "target": "components/spectrumui/event-calendar"
    }
  ],
  "type": "registry:component"
}