first commit
This commit is contained in:
@@ -0,0 +1,72 @@
|
||||
"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 }
|
||||
Reference in New Issue
Block a user