73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { DayPicker } from "react-day-picker"
|
|
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
|
|
|
|
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 gap-4",
|
|
month: "flex flex-col gap-4",
|
|
month_caption: "flex justify-center relative items-center",
|
|
caption_label: "text-sm font-medium",
|
|
nav: "flex items-center gap-1",
|
|
button_previous: cn(
|
|
buttonVariants({ variant: "outline", size: "icon-sm" }),
|
|
"absolute left-1 top-1 h-7 w-7"
|
|
),
|
|
button_next: cn(
|
|
buttonVariants({ variant: "outline", size: "icon-sm" }),
|
|
"absolute right-1 top-1 h-7 w-7"
|
|
),
|
|
month_grid: "w-full border-collapse",
|
|
weekdays: "flex",
|
|
weekday:
|
|
"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem] flex items-center justify-center",
|
|
week: "flex w-full mt-2",
|
|
day: "relative p-0 text-center text-sm",
|
|
day_button: cn(
|
|
buttonVariants({ variant: "ghost" }),
|
|
"h-8 w-8 rounded-md p-0 font-normal aria-selected:opacity-100"
|
|
),
|
|
selected:
|
|
"[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground [&>button]:focus:bg-primary [&>button]:focus:text-primary-foreground",
|
|
today: "[&>button]:bg-accent [&>button]:text-accent-foreground",
|
|
outside:
|
|
"day-outside [&>button]:text-muted-foreground [&>button]:opacity-50",
|
|
disabled: "[&>button]:text-muted-foreground [&>button]:opacity-50",
|
|
range_middle:
|
|
"[&>button]:bg-accent [&>button]:text-accent-foreground [&>button]:hover:bg-accent [&>button]:hover:text-accent-foreground",
|
|
range_start: "day-range-start",
|
|
range_end: "day-range-end",
|
|
hidden: "invisible",
|
|
...classNames,
|
|
}}
|
|
components={{
|
|
Chevron: ({ orientation }) =>
|
|
orientation === "left" ? (
|
|
<ChevronLeftIcon className="size-4" />
|
|
) : (
|
|
<ChevronRightIcon className="size-4" />
|
|
),
|
|
}}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { Calendar }
|