8-bit Calendar

1import { type VariantProps, cva } from "class-variance-authority";
2import type { DayPicker } from "react-day-picker";
3 
4import { cn } from "@/lib/utils";
5 
6import { Calendar as ShadcnCalendar } from "@/components/ui/calendar";
7 
8import { buttonVariants } from "./button";
9import {
10  Select,
11  SelectContent,
12  SelectItem,
13  SelectTrigger,
14  SelectValue,
15} from "./select";
16import "@/components/ui/8bit/styles/retro.css";
17 
18export const calendarVariants = cva("", {
19  variants: {
20    font: {
21      normal: "",
22      retro: "retro",
23    },
24  },
25  defaultVariants: {
26    font: "retro",
27  },
28});
29 
30export type CalendarProps = React.ComponentProps<typeof DayPicker> &
31  VariantProps<typeof calendarVariants>;
32 
33function Calendar({ className, classNames, font, ...props }: CalendarProps) {
34  return (
35    <div
36      className={cn(
37        "bg-popover relative border-y-6 border-foreground dark:border-ring w-max",
38        className
39      )}
40    >
41      <ShadcnCalendar
42        className={cn(
43          calendarVariants({
44            className,
45            font,
46          })
47        )}
48        classNames={{
49          button_previous: cn(
50            buttonVariants({ variant: "outline" }),
51            "size-7 bg-transparent p-0 flex items-center justify-center hover:opacity-50 border-2 border-foreground dark:border-ring"
52          ),
53          button_next: cn(
54            buttonVariants({ variant: "outline" }),
55            "size-7 bg-transparent p-0 flex items-center justify-center hover:opacity-50 border-2 border-foreground dark:border-ring"
56          ),
57          day_button: cn(
58            buttonVariants({ variant: "ghost" }),
59            "h-10 font-normal aria-selected:opacity-100"
60          ),
61          day: cn(
62            "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day select-none"
63          ),
64          caption_label: "text-xs font-medium",
65          ...classNames,
66        }}
67        components={{
68          MonthsDropdown: ({
69            "aria-label": ariaLabel,
70            className,
71            disabled,
72            onChange,
73            options,
74            value,
75          }) => {
76            return (
77              <div className={cn("flex flex-col gap-3 text-xs", className)}>
78                <Select
79                  disabled={disabled}
80                  onValueChange={(nextValue) => {
81                    onChange?.({
82// … truncated