mini-calendar

1"use client";
2 
3import { useControllableState } from "@radix-ui/react-use-controllable-state";
4import { addDays, format, isSameDay, isToday } from "date-fns";
5import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
6import { Slot } from "radix-ui";
7import {
8  type ButtonHTMLAttributes,
9  type ComponentProps,
10  createContext,
11  type HTMLAttributes,
12  type MouseEventHandler,
13  type ReactNode,
14  useContext,
15} from "react";
16import { Button } from "@/components/ui/button";
17import { cn } from "@/lib/utils";
18 
19// Context for sharing state between components
20type MiniCalendarContextType = {
21  selectedDate: Date | null | undefined;
22  onDateSelect: (date: Date) => void;
23  startDate: Date;
24  onNavigate: (direction: "prev" | "next") => void;
25  days: number;
26};
27 
28const MiniCalendarContext = createContext<MiniCalendarContextType | null>(null);
29 
30const useMiniCalendar = () => {
31  const context = useContext(MiniCalendarContext);
32 
33  if (!context) {
34    throw new Error("MiniCalendar components must be used within MiniCalendar");
35  }
36 
37  return context;
38};
39 
40// Helper function to get array of consecutive dates
41const getDays = (startDate: Date, count: number): Date[] => {
42  const days: Date[] = [];
43  for (let i = 0; i < count; i++) {
44    days.push(addDays(startDate, i));
45  }
46  return days;
47};
48 
49// Helper function to format date
50const formatDate = (date: Date) => {
51  const month = format(date, "MMM");
52  const day = format(date, "d");
53 
54  return { month, day };
55};
56 
57export type MiniCalendarProps = HTMLAttributes<HTMLDivElement> & {
58  value?: Date;
59  defaultValue?: Date;
60  onValueChange?: (date: Date | undefined) => void;
61  startDate?: Date;
62  defaultStartDate?: Date;
63  onStartDateChange?: (date: Date | undefined) => void;
64  days?: number;
65};
66 
67export const MiniCalendar = ({
68  value,
69  defaultValue,
70  onValueChange,
71  startDate,
72  defaultStartDate = new Date(),
73  onStartDateChange,
74  days = 5,
75  className,
76  children,
77  ...props
78}: MiniCalendarProps) => {
79  const [selectedDate, setSelectedDate] = useControllableState<
80    Date | undefined
81  >({
82    prop: value,
83    defaultProp: defaultValue,
84    onChange: onValueChange,
85  });
86 
87  const [currentStartDate, setCurrentStartDate] = useControllableState({
88    prop: startDate,
89    defaultProp: defaultStartDate,
90    onChange: onStartDateChange,
91  });
92 
93  const handleDateSelect = (date: Date) => {
94    setSelectedDate(date);
95  };
96 
97  const handleNavigate = (direction: "prev" | "next") => {
98    const newStartDate = addDays(
99// … truncated