pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 20:31:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement year grid navigation

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-11 17:50:46 +00:00
parent bd0b0a81a1
commit c59ab9523f
4 changed files with 269 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/ui/calendar.tsx
View File

@@ -4,14 +4,18 @@ import { DayPicker } from "react-day-picker";
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";
import { CustomCalendarCaption } from "@/components/ui/calendar-custom-caption";
export type CalendarProps = React.ComponentProps<typeof DayPicker>;
export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
enableYearGrid?: boolean;
};
function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
function Calendar({ className, classNames, showOutsideDays = true, enableYearGrid = false, ...props }: CalendarProps) {
const captionLayout = enableYearGrid ? undefined : (props.captionLayout || "dropdown-buttons");
return (
<DayPicker
showOutsideDays={showOutsideDays}
captionLayout="dropdown-buttons"
captionLayout={captionLayout}
fromYear={props.fromYear || 1800}
toYear={props.toYear || new Date().getFullYear() + 10}
className={cn("p-3", className)}
@@ -45,6 +49,15 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
...classNames,
}}
components={{
Caption: enableYearGrid
? (captionProps) => (
<CustomCalendarCaption
{...captionProps}
fromYear={props.fromYear || 1800}
toYear={props.toYear || new Date().getFullYear() + 10}
/>
)
: undefined,
IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
}}