feat(dashboard): add new year countdown

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() {
         <div className="grid gap-4 @4xl/content:grid-cols-2">
           <AcademicCalendarWidget />
           <SportsWidget />
+          <NewYearWidget />
         </div>
         <div className="flex flex-col justify-between gap-4 @container/sections @6xl/content:flex-row @6xl/content:gap-8">
           <details className="flex w-full flex-col @container/schedule @6xl/content:w-1/2">

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 (
+    <div className="group flex flex-row gap-4 rounded-2xl bg-primary px-4 py-6">
+      <div className="w-12">
+        <span className="icon-[twemoji--christmas-tree] text-5xl text-brand-violet" />
+      </div>
+      <div className="flex flex-col">
+        <p className="text-2xl font-semibold text-contrast">
+          New Year Countdown:{" "}
+          <span className="font-normal">{daysLeft} days</span>
+          <p className="mt-2 text-lg text-contrast/75">
+            {hoursLeft} hours, {minutesLeft} minutes, {secondsLeft} seconds
+          </p>
+        </p>
+      </div>
+    </div>
+  );
+}

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<number>(Date.now());
   // Update every 5 seconds
-  useInterval(() => setNow(Date.now()), enabled ? 5000 : null);
+  useInterval(() => setNow(Date.now()), enabled ? interval : null);
   return now;
 }