fix: fix build error on calendar ui

This commit is contained in:
Sosokker 2024-11-04 09:50:48 +07:00
parent b316f5470c
commit 3beb6e2c72
3 changed files with 61 additions and 45 deletions

53
package-lock.json generated
View File

@ -45,6 +45,7 @@
"next-themes": "^0.3.0",
"react": "^18",
"react-countup": "^6.5.3",
"react-day-picker": "^9",
"react-dom": "^18",
"react-file-icon": "^1.5.0",
"react-hook-form": "^7.53.0",
@ -453,6 +454,11 @@
"node": ">=6.9.0"
}
},
"node_modules/@date-fns/tz": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.2.0.tgz",
"integrity": "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg=="
},
"node_modules/@eslint-community/eslint-utils": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
@ -2020,9 +2026,9 @@
}
},
"node_modules/@supabase-cache-helpers/postgrest-react-query": {
"version": "1.10.1",
"resolved": "https://registry.npmjs.org/@supabase-cache-helpers/postgrest-react-query/-/postgrest-react-query-1.10.1.tgz",
"integrity": "sha512-BGGrEKue6mSH0el1iO1+iOSuyGqQxsHQ2B8dXWlDvYGmU7rmw5AGqXqDWngMBX68LcoHVJEogdbXP0pH4+1Tuw==",
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/@supabase-cache-helpers/postgrest-react-query/-/postgrest-react-query-1.11.0.tgz",
"integrity": "sha512-qJoFfdqfuYTXvmuzPO7ggAoxTmsuufmuZWkI8kMWhceItp+AOdvTzU7AmbVUxMAUBm3e8qSSj3Li7Saj77fFyA==",
"dependencies": {
"@supabase-cache-helpers/postgrest-core": "0.8.1",
"flat": "6.0.1"
@ -2162,18 +2168,18 @@
}
},
"node_modules/@tanstack/query-devtools": {
"version": "5.58.0",
"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.58.0.tgz",
"integrity": "sha512-iFdQEFXaYYxqgrv63ots+65FGI+tNp5ZS5PdMU1DWisxk3fez5HG3FyVlbUva+RdYS5hSLbxZ9aw3yEs97GNTw==",
"version": "5.59.19",
"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.59.19.tgz",
"integrity": "sha512-Gw+3zsADpqiYgx/6MMr9bP1+x2LR8vOuGjo5Un/89qwwP3z7WAHPWFagLFDYkLq68NX7ekUpW/EOYlUMugMXGA==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/react-query": {
"version": "5.59.17",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.17.tgz",
"integrity": "sha512-2taBKHT3LrRmS9ttUOmtaekVOXlZ5JXzNhL9Kmi6BSBdfIAZwEinMXZ8hffVuDpFoRCWlBaGcNkhP/zXgzq5ow==",
"version": "5.59.19",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.19.tgz",
"integrity": "sha512-xLRfyFyQOFcLltKCds0LijfC6/HQJrrTTnZB8ciyn74LIkVAm++vZJ6eUVG20RmJtdP8REdy7vSOYW4M3//XLA==",
"dependencies": {
"@tanstack/query-core": "5.59.17"
},
@ -2186,18 +2192,18 @@
}
},
"node_modules/@tanstack/react-query-devtools": {
"version": "5.59.17",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.59.17.tgz",
"integrity": "sha512-P5lRlPmSKXQZ+pzVFPMCrwKPyRtUk/yggtuceB435JPLiaP7UGoO6JQfSsaXHnVC9+LzRMYJjIEq6zm+1HteeQ==",
"version": "5.59.19",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.59.19.tgz",
"integrity": "sha512-mYFWTHLtJr2HdyYPZPzzvQ2ksCsSL6L04fCtusPFD3waskXrtmvWvyuDIGeEGdVAYS0Urwxw/0sYvcTVQZH+zQ==",
"dependencies": {
"@tanstack/query-devtools": "5.58.0"
"@tanstack/query-devtools": "5.59.19"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"@tanstack/react-query": "^5.59.17",
"@tanstack/react-query": "^5.59.19",
"react": "^18 || ^19"
}
},
@ -8425,6 +8431,25 @@
"react": ">= 16.3.0"
}
},
"node_modules/react-day-picker": {
"version": "9.2.1",
"resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.2.1.tgz",
"integrity": "sha512-rCoK4oJi9NBXt1nNdQFSa7gBG+hWsqVCtoLFLxvMzkVxDp+rSqsuUQ0LccJyLigwp/hX8XnAokTsT03+5lbjyA==",
"dependencies": {
"@date-fns/tz": "^1.1.2",
"date-fns": "^4.1.0"
},
"engines": {
"node": ">=18"
},
"funding": {
"type": "individual",
"url": "https://github.com/sponsors/gpbl"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/react-dom": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",

View File

@ -47,7 +47,7 @@
"next-themes": "^0.3.0",
"react": "^18",
"react-countup": "^6.5.3",
"react-day-picker": "8.10.1",
"react-day-picker": "^9",
"react-dom": "^18",
"react-file-icon": "^1.5.0",
"react-hook-form": "^7.53.0",

View File

@ -1,20 +1,15 @@
"use client"
"use client";
import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"
import * as React from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { DayPicker } from "react-day-picker";
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";
export type CalendarProps = React.ComponentProps<typeof DayPicker>
export type CalendarProps = React.ComponentProps<typeof DayPicker>;
function Calendar({
className,
classNames,
showOutsideDays = true,
...props
}: CalendarProps) {
function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
return (
<DayPicker
showOutsideDays={showOutsideDays}
@ -33,34 +28,30 @@ function Calendar({
nav_button_next: "absolute right-1",
table: "w-full border-collapse space-y-1",
head_row: "flex",
head_cell:
"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
row: "flex w-full mt-2",
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",
day: cn(
buttonVariants({ variant: "ghost" }),
"h-9 w-9 p-0 font-normal aria-selected:opacity-100"
),
day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
day_range_end: "day-range-end",
day_selected:
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
day_today: "bg-accent text-accent-foreground",
day_outside:
"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
day_outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
day_disabled: "text-muted-foreground opacity-50",
day_range_middle:
"aria-selected:bg-accent aria-selected:text-accent-foreground",
day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
day_hidden: "invisible",
...classNames,
}}
components={{
IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
}}
components={
{
IconLeft: () => <ChevronLeft className="h-4 w-4" />,
IconRight: () => <ChevronRight className="h-4 w-4" />,
} as any
}
{...props}
/>
)
);
}
Calendar.displayName = "Calendar"
Calendar.displayName = "Calendar";
export { Calendar }
export { Calendar };