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