Openstatus
www.openstatus.dev
1"use client";
2
3import { ChevronLeft, ChevronRight } from "lucide-react";
4import { DayPicker } from "react-day-picker";
5
6import { buttonVariants } from "../components/button";
7import { cn } from "../lib/utils";
8
9export type CalendarProps = React.ComponentProps<typeof DayPicker>;
10
11function Calendar({
12 className,
13 classNames,
14 showOutsideDays = true,
15 ...props
16}: CalendarProps) {
17 return (
18 <DayPicker
19 showOutsideDays={showOutsideDays}
20 className={cn("p-3", className)}
21 classNames={{
22 months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
23 month: "space-y-4",
24 caption: "flex justify-center pt-1 relative items-center",
25 caption_label: "text-sm font-medium",
26 nav: "space-x-1 flex items-center",
27 nav_button: cn(
28 buttonVariants({ variant: "outline" }),
29 "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
30 ),
31 nav_button_previous: "absolute left-1",
32 nav_button_next: "absolute right-1",
33 table: "w-full border-collapse space-y-1",
34 head_row: "flex",
35 head_cell:
36 "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
37 row: "flex w-full mt-2",
38 cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
39 day: cn(
40 buttonVariants({ variant: "ghost" }),
41 "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
42 ),
43 day_selected:
44 "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
45 day_today: "bg-accent text-accent-foreground",
46 day_outside: "text-muted-foreground opacity-50",
47 day_disabled: "text-muted-foreground opacity-50",
48 day_range_middle:
49 "aria-selected:bg-accent aria-selected:text-accent-foreground",
50 day_hidden: "invisible",
51 ...classNames,
52 }}
53 components={{
54 IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
55 IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
56 }}
57 {...props}
58 />
59 );
60}
61Calendar.displayName = "Calendar";
62
63export { Calendar };