{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar",
  "type": "registry:component",
  "title": "Calendar",
  "description": "Custom calendar component",
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "components/chatcn/ai/calendar.tsx",
      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport {\n  Card,\n  CardContent,\n  CardTitle,\n  CardHeader,\n  CardDescription,\n} from \"@/components/ui/card\";\nimport {\n  Calendar01Icon,\n  ArrowRight01Icon,\n  ArrowLeft01Icon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\n\ntype Props = {\n  title: string;\n  description?: string;\n};\n\nexport default function Heatmap({ title, description }: Props) {\n  const now = new Date();\n  const currentMonth = now.getMonth();\n  const currentYear = now.getFullYear();\n  const [selectedMonth, setSelectedMonth] = useState(currentMonth);\n  const [selectedYear, setSelectedYear] = useState(currentYear);\n\n  const numberOfDays = new Date(selectedYear, selectedMonth + 1, 0).getDate();\n  const firstDayOfMonth = new Date(selectedYear, selectedMonth, 1).getDay();\n\n  const months = [\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"December\",\n  ];\n\n  const days = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n\n  const handlePrevMonth = () => {\n    if (selectedMonth === 0) {\n      setSelectedMonth(11);\n      setSelectedYear((prev) => prev - 1);\n    } else {\n      setSelectedMonth((prev) => prev - 1);\n    }\n  };\n\n  const handleNextMonth = () => {\n    if (selectedMonth === 11) {\n      setSelectedMonth(0);\n      setSelectedYear((prev) => prev + 1);\n    } else {\n      setSelectedMonth((prev) => prev + 1);\n    }\n  };\n\n  const isToday = (day: number) => {\n    const today = new Date();\n    return (\n      day === today.getDate() &&\n      selectedMonth === today.getMonth() &&\n      selectedYear === today.getFullYear()\n    );\n  };\n\n  return (\n    <Card className=\"w-full max-w-md mx-auto shadow-sm\">\n      <CardHeader className=\"pb-3\">\n        <div className=\"flex items-start justify-between\">\n          <div className=\"flex items-start gap-3\">\n            <div className=\"bg-primary/10 p-2 rounded-lg\">\n              <HugeiconsIcon\n                icon={Calendar01Icon}\n                size={20}\n                className=\"text-primary\"\n              />\n            </div>\n            <div>\n              <CardTitle className=\"text-xl font-semibold\">{title}</CardTitle>\n              {description && (\n                <CardDescription className=\"text-sm mt-1 text-muted-foreground\">\n                  {description}\n                </CardDescription>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* \n\n        <Component props={name:sankalpa title:salkdjlaksd}/>\n        \n        */}\n\n        <div className=\"flex items-center justify-between mt-4\">\n          <h3 className=\"text-md font-medium\">\n            {months[selectedMonth]} {selectedYear}\n          </h3>\n          <div className=\"flex items-center gap-1\">\n            <button\n              className=\"p-1.5 hover:bg-muted rounded-md transition-colors\"\n              onClick={handlePrevMonth}\n              aria-label=\"Previous month\"\n            >\n              <HugeiconsIcon icon={ArrowLeft01Icon} size={16} />\n            </button>\n            <button\n              className=\"p-1.5 hover:bg-muted rounded-md transition-colors\"\n              onClick={handleNextMonth}\n              aria-label=\"Next month\"\n            >\n              <HugeiconsIcon icon={ArrowRight01Icon} size={16} />\n            </button>\n          </div>\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-4 pb-4\">\n        <div className=\"grid grid-cols-7 gap-1 text-xs text-center mb-3 text-muted-foreground font-medium\">\n          {days.map((day, i) => (\n            <div key={i} className=\"py-1\">\n              {day}\n            </div>\n          ))}\n        </div>\n\n        <div className=\"grid grid-cols-7 grid-rows-6 gap-1\">\n          {Array.from({ length: numberOfDays + firstDayOfMonth }, (_, i) =>\n            firstDayOfMonth > i ? (\n              <div key={i} className=\"aspect-square\"></div>\n            ) : (\n              <DayCard\n                key={i}\n                day={i - firstDayOfMonth + 1}\n                isToday={isToday(i - firstDayOfMonth + 1)}\n              />\n            )\n          )}\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n\nfunction DayCard({ day, isToday = false }: { day: number; isToday?: boolean }) {\n  return (\n    <div\n      className={`\n        aspect-square min-w-[2rem] rounded-md flex items-center justify-center \n        text-xs font-medium transition-all duration-200 cursor-pointer\n        hover:bg-muted/80 hover:scale-105\n        ${\n          isToday\n            ? \"bg-primary text-primary-foreground shadow-sm\"\n            : \"bg-muted/50 text-muted-foreground hover:text-foreground\"\n        }\n      `}\n    >\n      {day}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}