Pixelact Calendar

1import { type VariantProps, cva } from "class-variance-authority";
2import { DayPicker } from "react-day-picker";
3 
4import { cn } from "@/lib/utils";
5 
6import { Calendar as ShadcnCalendar } from "@/components/ui/calendar";
7 
8import { buttonVariants } from "@/components/ui/button";
9import "@/components/ui/pixelact-ui/styles/styles.css";
10import { ComponentProps } from "react";
11 
12const calendarVariants = cva("bg-card text-card-foreground", {
13  variants: {
14    font: {
15      normal: "",
16      pixel: "pixel-font",
17    },
18  },
19  defaultVariants: {
20    font: "pixel",
21  },
22});
23 
24export type CalendarProps = ComponentProps<typeof DayPicker> &
25  VariantProps<typeof calendarVariants>;
26 
27function Calendar({ className, classNames, font, ...props }: CalendarProps) {
28  const hasDropdowns = props.captionLayout === "dropdown";
29  return (
30    <ShadcnCalendar
31      className={cn(
32        "border-none shadow-(--pixel-box-shadow) box-shadow-margin",
33        calendarVariants({
34          className,
35          font,
36        })
37      )}
38      classNames={{
39        today: cn("bg-foreground/10"),
40        nav_button: cn(
41          buttonVariants({ variant: "outline" }),
42          "size-7 bg-transparent p-0 flex items-center justify-center hover:opacity-50"
43        ),
44        day_button: cn(
45          buttonVariants({ variant: "ghost" }),
46          "h-10 rounded-none font-sm aria-selected:opacity-100"
47        ),
48        day: cn("relative rounded-none group/day select-none"),
49        caption_label: `flex gap-2 p-1  ${
50          hasDropdowns ? "shadow-(--pixel-box-shadow) box-shadow-margin" : ""
51        }`,
52        dropdown_root: cn("relative"),
53        months_dropdown: cn("text-foreground p-2"),
54        years_dropdown: cn("text-foreground p-2"),
55        ...classNames,
56      }}
57      components={{
58        Chevron: ({ className, orientation, ...props }) => {
59          if (orientation === "left") {
60            return (
61              <svg
62                xmlns="http://www.w3.org/2000/svg"
63                width="32"
64                height="32"
65                viewBox="0 0 24 24"
66                className={cn("size-6", className)}
67                {...props}
68              >
69                <path
70                  className="fill-foreground"
71                  d="M16 5v2h-2V5zm-4 4V7h2v2zm-2 2V9h2v2zm0 2H8v-2h2zm2 2v-2h-2v2zm0 0h2v2h-2zm4 4v-2h-2v2z"
72                />
73              </svg>
74            );
75          }
76 
77          if (orientation === "right") {
78            return (
79              <svg
80// … truncated