Spaces:
Paused
Paused
"use client" | |
import * as React from "react" | |
import { ChevronLeft, ChevronRight } from "lucide-react" | |
import { DayPicker } from "react-day-picker" | |
import { cn } from "@/lib/utils" | |
import { buttonVariants } from "@/components/ui/button" | |
export type CalendarProps = React.ComponentProps<typeof DayPicker> | |
function Calendar({ | |
className, | |
classNames, | |
showOutsideDays = true, | |
...props | |
}: CalendarProps) { | |
return ( | |
<DayPicker | |
showOutsideDays={showOutsideDays} | |
className={cn("p-3", className)} | |
classNames={{ | |
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", | |
month: "space-y-4", | |
caption: "flex justify-center pt-1 relative items-center", | |
caption_label: "text-sm font-medium", | |
nav: "space-x-1 flex items-center", | |
nav_button: cn( | |
buttonVariants({ variant: "outline" }), | |
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100" | |
), | |
nav_button_previous: "absolute left-1", | |
nav_button_next: "absolute right-1", | |
table: "w-full border-collapse space-y-1", | |
head_row: "flex", | |
head_cell: | |
"text-stone-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-stone-400", | |
row: "flex w-full mt-2", | |
cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-stone-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected])]:bg-stone-800", | |
day: cn( | |
buttonVariants({ variant: "ghost" }), | |
"h-9 w-9 p-0 font-normal aria-selected:opacity-100" | |
), | |
day_selected: | |
"bg-stone-900 text-stone-50 hover:bg-stone-900 hover:text-stone-50 focus:bg-stone-900 focus:text-stone-50 dark:bg-stone-50 dark:text-stone-900 dark:hover:bg-stone-50 dark:hover:text-stone-900 dark:focus:bg-stone-50 dark:focus:text-stone-900", | |
day_today: "bg-stone-100 text-stone-900 dark:bg-stone-800 dark:text-stone-50", | |
day_outside: "text-stone-500 opacity-50 dark:text-stone-400", | |
day_disabled: "text-stone-500 opacity-50 dark:text-stone-400", | |
day_range_middle: | |
"aria-selected:bg-stone-100 aria-selected:text-stone-900 dark:aria-selected:bg-stone-800 dark:aria-selected:text-stone-50", | |
day_hidden: "invisible", | |
...classNames, | |
}} | |
components={{ | |
IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />, | |
IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />, | |
}} | |
{...props} | |
/> | |
) | |
} | |
Calendar.displayName = "Calendar" | |
export { Calendar } | |