Calendar

1"use client";
2import React, { useState } from "react";
3import {
4  Card,
5  CardContent,
6  CardTitle,
7  CardHeader,
8  CardDescription,
9} from "@/components/ui/card";
10import {
11  Calendar01Icon,
12  ArrowRight01Icon,
13  ArrowLeft01Icon,
14} from "@hugeicons/core-free-icons";
15import { HugeiconsIcon } from "@hugeicons/react";
16 
17type Props = {
18  title: string;
19  description?: string;
20};
21 
22export default function Heatmap({ title, description }: Props) {
23  const now = new Date();
24  const currentMonth = now.getMonth();
25  const currentYear = now.getFullYear();
26  const [selectedMonth, setSelectedMonth] = useState(currentMonth);
27  const [selectedYear, setSelectedYear] = useState(currentYear);
28 
29  const numberOfDays = new Date(selectedYear, selectedMonth + 1, 0).getDate();
30  const firstDayOfMonth = new Date(selectedYear, selectedMonth, 1).getDay();
31 
32  const months = [
33    "January",
34    "February",
35    "March",
36    "April",
37    "May",
38    "June",
39    "July",
40    "August",
41    "September",
42    "October",
43    "November",
44    "December",
45  ];
46 
47  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
48 
49  const handlePrevMonth = () => {
50    if (selectedMonth === 0) {
51      setSelectedMonth(11);
52      setSelectedYear((prev) => prev - 1);
53    } else {
54      setSelectedMonth((prev) => prev - 1);
55    }
56  };
57 
58  const handleNextMonth = () => {
59    if (selectedMonth === 11) {
60      setSelectedMonth(0);
61      setSelectedYear((prev) => prev + 1);
62    } else {
63      setSelectedMonth((prev) => prev + 1);
64    }
65  };
66 
67  const isToday = (day: number) => {
68    const today = new Date();
69    return (
70      day === today.getDate() &&
71      selectedMonth === today.getMonth() &&
72      selectedYear === today.getFullYear()
73    );
74  };
75 
76  return (
77    <Card className="w-full max-w-md mx-auto shadow-sm">
78      <CardHeader className="pb-3">
79        <div className="flex items-start justify-between">
80          <div className="flex items-start gap-3">
81            <div className="bg-primary/10 p-2 rounded-lg">
82              <HugeiconsIcon
83                icon={Calendar01Icon}
84                size={20}
85                className="text-primary"
86              />
87            </div>
88            <div>
89              <CardTitle className="text-xl font-semibold">{title}</CardTitle>
90              {description && (
91                <CardDescription className="text-sm mt-1 text-muted-foreground">
92                  {description}
93                </CardDescription>
94              )}
95            </div>
96          </div>
97// … truncated