diff --git a/src/components/dashboard/DashboardPage.tsx b/src/components/dashboard/DashboardPage.tsx index 3415bbd..f9335a0 100644 --- a/src/components/dashboard/DashboardPage.tsx +++ b/src/components/dashboard/DashboardPage.tsx @@ -5,6 +5,7 @@ import { URLType } from "@/components/calendar/CalendarViewer.tsx"; import { AuthWall } from "@/components/common/AuthWall.tsx"; import { AcademicCalendarWidget } from "@/components/dashboard/AcademicCalendarWidget.tsx"; import { AccountWidget } from "@/components/dashboard/AccountWidget.tsx"; +import { NewYearWidget } from "@/components/dashboard/NewYearWidget.tsx"; import { SportsWidget } from "@/components/dashboard/SportsWidget.tsx"; import { GroupCardById } from "@/components/schedule/group-card/GroupCardById.tsx"; import LinkIconButton from "@/components/schedule/group-card/LinkIconButton.tsx"; @@ -38,6 +39,7 @@ export function DashboardPage() {
+
diff --git a/src/components/dashboard/NewYearWidget.tsx b/src/components/dashboard/NewYearWidget.tsx new file mode 100644 index 0000000..defb278 --- /dev/null +++ b/src/components/dashboard/NewYearWidget.tsx @@ -0,0 +1,35 @@ +import { useNowMS } from "@/lib/utils/use-now.ts"; + +export function NewYearWidget() { + const nowMs = useNowMS(true, 1000); + + const nextYear = new Date().getFullYear() + 1; + const deadlineMs = + new Date(`${nextYear}-01-01`).getTime() - 3 * 60 * 60 * 1000; + const daysLeft = Math.max( + 0, + Math.floor((deadlineMs - nowMs) / (1000 * 60 * 60 * 24)), + ); + const hoursLeft = + Math.max(0, Math.floor((deadlineMs - nowMs) / (1000 * 60 * 60))) % 24; + const minutesLeft = + Math.max(0, Math.floor((deadlineMs - nowMs) / (1000 * 60))) % 60; + const secondsLeft = Math.max(0, Math.floor((deadlineMs - nowMs) / 1000)) % 60; + + return ( +
+
+ +
+
+

+ New Year Countdown:{" "} + {daysLeft} days +

+ {hoursLeft} hours, {minutesLeft} minutes, {secondsLeft} seconds +

+

+
+
+ ); +} diff --git a/src/lib/utils/use-now.ts b/src/lib/utils/use-now.ts index fdb94c5..6b3df18 100644 --- a/src/lib/utils/use-now.ts +++ b/src/lib/utils/use-now.ts @@ -1,9 +1,9 @@ import { useState } from "react"; import { useInterval } from "usehooks-ts"; -export function useNowMS(enabled: boolean) { +export function useNowMS(enabled: boolean, interval: number = 5000) { const [now, setNow] = useState(Date.now()); // Update every 5 seconds - useInterval(() => setNow(Date.now()), enabled ? 5000 : null); + useInterval(() => setNow(Date.now()), enabled ? interval : null); return now; }