940: Create Component for Duel Timer

js/src/app/dashboard/Dashboard.page.tsx

@@ -63,15 +63,26 @@ export default function DashboardPage() {
             : <RefreshSubmissions schoolRegistered={schoolRegistered} />}
           </Center>
           <Flex direction={smallPhone ? "row" : "column"} gap={"md"}>
-            <Flex direction={"column"} flex={1}>
-              <ProblemOfTheDay />
-            </Flex>
-            <Flex direction={"column"} flex={1}>
-              <DashboardLeaderboard
-                userId={data.user.id}
-                userTags={data.user.tags}
-              />
-            </Flex>
+            {(() => {
+              const leaderboardCard = (
+                <Flex direction={"column"} flex={1}>
+                  <DashboardLeaderboard
+                    userId={data.user.id}
+                    userTags={data.user.tags}
+                  />
+                </Flex>
+              );
+              const problemOfTheDayCard = (
+                <Flex direction={"column"} flex={1}>
+                  <ProblemOfTheDay />
+                </Flex>
+              );
+              const orderedComponents =
+                smallPhone ?
+                  [problemOfTheDayCard, leaderboardCard]
+                : [leaderboardCard, problemOfTheDayCard];
+              return <>{orderedComponents}</>;
+            })()}
             <Flex direction={"column"} flex={1}>
               <RecentSubmissions userId={data.user.id} />
             </Flex>

js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx

@@ -40,7 +40,7 @@ export default function ProblemOfTheDay() {
   const json = data.payload;
 
   return (
-    <CodebloomCard miw={"31vw"} mih={"63vh"}>
+    <CodebloomCard miw="31vw" mih={{ base: "auto", md: "63vh" }}>
       <Center>
         <Title style={{ textAlign: "center" }} order={3}>
           Problem of the day

js/src/app/duel/current/DuelTimer.tsx

@@ -0,0 +1,43 @@
+import { Text } from "@mantine/core";
+import { useState, useEffect } from "react";
+
+interface DuelTimerProps {
+  endTime: number; // milliseconds
+}
+
+const DuelTimer = ({ endTime }: DuelTimerProps) => {
+  const getTimeRemaining = () => {
+    const total = endTime - Date.now();
+    const seconds = Math.floor((total / 1000) % 60);
+    const minutes = Math.floor((total / 1000 / 60) % 60);
+    if (total <= 0) {
+      return {
+        minutes: 0,
+        seconds: 0,
+      };
+    }
+    return {
+      minutes,
+      seconds,
+    };
+  };
+
+  const [timeLeft, setTimeLeft] = useState(() => getTimeRemaining());
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(getTimeRemaining());
+    }, 1);
+
+    return () => clearInterval(timer);
+  });
+
+  return (
+    <div>
+      <Text size="xl">
+        {timeLeft.minutes}:{timeLeft.seconds.toString().padStart(2, "0")}
+      </Text>
+    </div>
+  );
+};
+
+export default DuelTimer;

js/src/lib/router.tsx

@@ -3,6 +3,7 @@ import ClubSignUp from "@/app/club/[clubSlug]/ClubSignUp.page";
 import DashboardPage from "@/app/dashboard/Dashboard.page";
 import DuelPage from "@/app/duel/[lobbyCode]/Duel.page";
 import CurrentDuelPage from "@/app/duel/current/CurrentDuel.page";
+import DuelTimer from "@/app/duel/current/DuelTimer";
 import PartyEntryPage from "@/app/duel/PartyEntry.page";
 import LeaderboardEmbed from "@/app/embed/leaderboard/LeaderboardEmbed";
 import PotdEmbed from "@/app/embed/potd/PotdEmbed";
@@ -239,4 +240,13 @@ export const router = createBrowserRouter([
     ),
     errorElement: <ErrorPage />,
   },
+  {
+    path: "/timer",
+    element: (
+      <PageShell>
+        <DuelTimer endTime={Date.now() + 10000} />
+      </PageShell>
+    ),
+    errorElement: <ErrorPage />,
+  },
 ]);