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