calendar

1"use client";
2 
3import { getDay, getDaysInMonth, isSameDay } from "date-fns";
4import { atom, useAtom } from "jotai";
5import {
6  Check,
7  ChevronLeftIcon,
8  ChevronRightIcon,
9  ChevronsUpDown,
10} from "lucide-react";
11import {
12  createContext,
13  memo,
14  type ReactNode,
15  useCallback,
16  useContext,
17  useMemo,
18  useState,
19} from "react";
20import { Button } from "@/components/ui/button";
21import {
22  Command,
23  CommandEmpty,
24  CommandGroup,
25  CommandInput,
26  CommandItem,
27  CommandList,
28} from "@/components/ui/command";
29import {
30  Popover,
31  PopoverContent,
32  PopoverTrigger,
33} from "@/components/ui/popover";
34import { cn } from "@/lib/utils";
35 
36export type CalendarState = {
37  month: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
38  year: number;
39};
40 
41const monthAtom = atom<CalendarState["month"]>(
42  new Date().getMonth() as CalendarState["month"]
43);
44const yearAtom = atom<CalendarState["year"]>(new Date().getFullYear());
45 
46export const useCalendarMonth = () => useAtom(monthAtom);
47export const useCalendarYear = () => useAtom(yearAtom);
48 
49type CalendarContextProps = {
50  locale: Intl.LocalesArgument;
51  startDay: number;
52};
53 
54const CalendarContext = createContext<CalendarContextProps>({
55  locale: "en-US",
56  startDay: 0,
57});
58 
59export type Status = {
60  id: string;
61  name: string;
62  color: string;
63};
64 
65export type Feature = {
66  id: string;
67  name: string;
68  startAt: Date;
69  endAt: Date;
70  status: Status;
71};
72 
73type ComboboxProps = {
74  value: string;
75  setValue: (value: string) => void;
76  data: {
77    value: string;
78    label: string;
79  }[];
80  labels: {
81    button: string;
82    empty: string;
83    search: string;
84  };
85  className?: string;
86};
87 
88export const monthsForLocale = (
89  localeName: Intl.LocalesArgument,
90  monthFormat: Intl.DateTimeFormatOptions["month"] = "long"
91) => {
92  const format = new Intl.DateTimeFormat(localeName, { month: monthFormat })
93    .format;
94 
95  return [...new Array(12).keys()].map((m) =>
96    format(new Date(Date.UTC(2021, m, 2)))
97  );
98};
99 
100export const daysForLocale = (
101  locale: Intl.LocalesArgument,
102  startDay: number
103) => {
104  const weekdays: string[] = [];
105  const baseDate = new Date(2024, 0, startDay);
106 
107  for (let i = 0; i < 7; i++) {
108    weekdays.push(
109      new Intl.DateTimeFormat(locale, { weekday: "short" }).format(baseDate)
110    );
111    baseDate.setDate(baseDate.getDate() + 1);
112  }
113 
114  return weekdays;
115};
116 
117const Combobox = ({
118  value,
119  setValue,
120  data,
121  labels,
122  className,
123}: ComboboxProps) => {
124  const [open, setOpen] = useState(false);
125 
126  return (
127// … truncated