From fa7ce1fae726688c64af9e664a633e015ae86ad3 Mon Sep 17 00:00:00 2001
From: Artem Bulgakov <ArtemSBulgakov@ya.ru>
Date: Thu, 21 Nov 2024 19:31:02 +0300
Subject: [PATCH] feat(dashboard): add new year countdown

---
 src/components/dashboard/DashboardPage.tsx |  2 ++
 src/components/dashboard/NewYearWidget.tsx | 35 ++++++++++++++++++++++
 src/lib/utils/use-now.ts                   |  4 +--
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/components/dashboard/NewYearWidget.tsx

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