Month Picker

1"use client";
2import * as React from "react";
3import { ChevronLeft, ChevronRight } from "lucide-react";
4import { buttonVariants } from "./button";
5import { cn } from "@/lib/utils";
6 
7type Month = {
8    number: number;
9    name: string;
10};
11 
12const MONTHS: Month[][] = [
13    [
14        { number: 0, name: "Jan" },
15        { number: 1, name: "Feb" },
16        { number: 2, name: "Mar" },
17        { number: 3, name: "Apr" },
18    ],
19    [
20        { number: 4, name: "May" },
21        { number: 5, name: "Jun" },
22        { number: 6, name: "Jul" },
23        { number: 7, name: "Aug" },
24    ],
25    [
26        { number: 8, name: "Sep" },
27        { number: 9, name: "Oct" },
28        { number: 10, name: "Nov" },
29        { number: 11, name: "Dec" },
30    ],
31];
32 
33type MonthCalProps = {
34    selectedMonth?: Date;
35    onMonthSelect?: (date: Date) => void;
36    onYearForward?: () => void;
37    onYearBackward?: () => void;
38    callbacks?: {
39        yearLabel?: (year: number) => string;
40        monthLabel?: (month: Month) => string;
41    };
42    variant?: {
43        calendar?: {
44            main?: ButtonVariant;
45            selected?: ButtonVariant;
46        };
47        chevrons?: ButtonVariant;
48    };
49    minDate?: Date;
50    maxDate?: Date;
51    disabledDates?: Date[];
52};
53 
54type ButtonVariant = "default" | "outline" | "ghost" | "link" | "destructive" | "secondary" | null | undefined;
55 
56function MonthPicker({
57    onMonthSelect,
58    selectedMonth,
59    minDate,
60    maxDate,
61    disabledDates,
62    callbacks,
63    onYearBackward,
64    onYearForward,
65    variant,
66    className,
67    ...props
68}: React.HTMLAttributes<HTMLDivElement> & MonthCalProps) {
69    return (
70        <div className={cn("min-w-[200px] w-[280px] p-3", className)} {...props}>
71            <div className="flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0">
72                <div className="space-y-4 w-full">
73                    <MonthCal
74                        onMonthSelect={onMonthSelect}
75                        callbacks={callbacks}
76                        selectedMonth={selectedMonth}
77                        onYearBackward={onYearBackward}
78                        onYearForward={onYearForward}
79                        variant={variant}
80                        minDate={minDate}
81                        maxDate={maxDate}
82                        disabledDates={disabledDates}
83                    ></MonthCal>
84                </div>
85            </div>
86        </div>
87    );
88}
89 
90// … truncated