MicroClub Calendar

1'use client';
2 
3import * as React from 'react';
4import { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
5import { format } from 'date-fns';
6import {
7  DayPicker,
8  getDefaultClassNames,
9  type DayButton,
10  type Locale,
11  type OptionProps,
12  type SelectProps,
13} from 'react-day-picker';
14 
15import { cn } from '@/lib/utils';
16import { McButton, buttonVariants } from '@/components/ui/mc-button';
17import { McPopover, McPopoverContent, McPopoverTrigger } from '@/registry/ui/mc-popover';
18 
19function McCalendar({
20  className,
21  classNames,
22  showOutsideDays = true,
23  captionLayout = 'label',
24  buttonVariant = 'secondary',
25  locale,
26  formatters,
27  components,
28  ...props
29}: React.ComponentProps<typeof DayPicker> & {
30  buttonVariant?: React.ComponentProps<typeof McButton>['variant'];
31}) {
32  const defaultClassNames = getDefaultClassNames();
33 
34  return (
35    <DayPicker
36      showOutsideDays={showOutsideDays}
37      className={cn(
38        'group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
39        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
40        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
41        className
42      )}
43      captionLayout={captionLayout}
44      locale={locale}
45      formatters={{
46        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),
47        ...formatters,
48      }}
49      classNames={{
50        root: cn('w-fit', defaultClassNames.root),
51        months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
52        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
53        nav: cn(
54          'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
55          defaultClassNames.nav
56        ),
57        button_previous: cn(
58          buttonVariants({ variant: buttonVariant }),
59          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
60          defaultClassNames.button_previous
61        ),
62        button_next: cn(
63          buttonVariants({ variant: buttonVariant }),
64          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
65          defaultClassNames.button_next
66        ),
67        month_caption: cn(
68          'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
69          defaultClassNames.month_caption
70        ),
71        dropdowns: cn(
72// … truncated