Calendar Widgets

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import { ChevronLeft, ChevronRight, Plus, Clock } from "lucide-react";
6import { GlassWidgetBase } from "./base-widget";
7 
8// Helper: returns the start-of-month Date for a given date
9function getMonthStart(date: Date) {
10  return new Date(date.getFullYear(), date.getMonth(), 1);
11}
12 
13interface CalendarWidgetProps {
14  date?: Date;
15  selectedDate?: Date;
16  onDateSelect?: (date: Date) => void;
17  className?: string;
18}
19 
20function CalendarWidget({
21  date,
22  selectedDate,
23  onDateSelect,
24  className,
25}: CalendarWidgetProps) {
26  const [internalDate, setInternalDate] = React.useState<Date | null>(date ?? null);
27 
28  // Always create the month state (avoid conditional hooks). Use a deterministic fallback date.
29  const [currentMonth, setCurrentMonth] = React.useState<Date>(() =>
30    getMonthStart(date ?? new Date(0))
31  );
32 
33  // On mount/client, set "now" if no date prop was provided.
34  React.useLayoutEffect(() => {
35    // eslint-disable-next-line react-hooks/set-state-in-effect
36    if (!date) setInternalDate(new Date());
37  }, [date]);
38 
39  // When internalDate is ready, sync currentMonth.
40  React.useLayoutEffect(() => {
41    if (internalDate) {
42      // eslint-disable-next-line react-hooks/set-state-in-effect
43      setCurrentMonth(getMonthStart(internalDate));
44    }
45  }, [internalDate]);
46 
47  if (!internalDate) {
48    // Lightweight client-side loading state to avoid using `new Date()` during prerender
49    return (
50      <GlassWidgetBase className={cn("min-w-60 p-4", className)} glowColor="purple">
51        <div className="h-6 w-36 bg-white/8 rounded animate-pulse" />
52        <div className="h-36 w-full mt-3 bg-white/8 rounded animate-pulse" />
53      </GlassWidgetBase>
54    );
55  }
56 
57  const selected = selectedDate ?? internalDate;
58 
59  const monthName = currentMonth.toLocaleDateString("en-US", { month: "short" });
60  const year = currentMonth.getFullYear();
61 
62  const firstDay = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
63  const lastDay = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);
64  const startPadding = firstDay.getDay();
65  const daysInMonth = lastDay.getDate();
66 
67  const days = Array.from({ length: startPadding + daysInMonth }, (_, i) => {
68    if (i < startPadding) return null;
69    return i - startPadding + 1;
70  });
71 
72  const prevMonth = () => {
73    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
74  };
75 
76// … truncated