Added timer, update nav, add more themes

src/app/_components/Dashboard.tsx

@@ -0,0 +1,105 @@
+import { CSSProperties, useEffect, useRef, useState } from "react";
+
+type DashBoardProps = {
+  startMin: number;
+  startSec: number;
+};
+
+export default function Dashboard({ startMin, startSec }: DashBoardProps) {
+  const [activeTimer, setActiveTimer] = useState(false);
+  const [minutes, setMinutes] = useState(startMin);
+  const [seconds, setSeconds] = useState(startSec);
+  const [percentage, setPercentage] = useState(100);
+  const timerRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    if (activeTimer) {
+      timerRef.current = setInterval(() => {
+        if (seconds > 0) {
+          setSeconds(seconds - 1);
+        }
+        if (seconds === 0) {
+          if (minutes === 0) {
+            clearInterval(timerRef.current);
+          } else {
+            setMinutes(minutes - 1);
+            setSeconds(59);
+          }
+        }
+      }, 1000);
+    }
+    return () => clearInterval(timerRef.current);
+  }, [activeTimer, minutes, seconds]);
+
+  useEffect(() => {
+    setPercentage(Math.abs((minutes / startMin) * 100 - 100));
+  }, [minutes, startMin]);
+
+  const restart = () => {
+    // Clears the interval to stop the timer from updating
+    setActiveTimer(false);
+    setMinutes(startMin);
+    setSeconds(startSec);
+  };
+
+  const pause = () => {
+    // Clears the interval to stop the timer from updating
+    if (activeTimer) {
+      setActiveTimer(false);
+      clearInterval(timerRef.current);
+    }
+  };
+
+  return (
+    <main className="flex min-h-screen flex-col items-center space-y-10 p-24">
+      <div
+        className="radial-progress bg-primary text-white border-4 border-primary"
+        style={
+          {
+            "--value": percentage,
+            "--size": "12rem",
+            "--thickness": "2px",
+          } as CSSProperties
+        }
+        role="progressbar"
+      >
+        <div className="grid grid-flow-col gap-1 text-center auto-cols-max">
+          <div className="flex flex-col text-white">
+            <span className="countdown font-mono text-2xl">
+              <span style={{ "--value": minutes } as CSSProperties}></span>:
+            </span>
+            min
+          </div>
+          <div className="flex flex-col text-white">
+            <span className="countdown font-mono text-2xl">
+              <span style={{ "--value": seconds } as CSSProperties}></span>
+            </span>
+            sec
+          </div>
+        </div>
+      </div>
+      <div className="flex space-x-5">
+        <button
+          className="btn rounded-full btn-primary text-white border-2 shadow-md"
+          disabled={!!activeTimer}
+          onClick={() => setActiveTimer(true)}
+        >
+          Start
+        </button>
+        <button
+          className="btn rounded-full btn-primary text-white border-2 shadow-md"
+          disabled={!activeTimer}
+          onClick={() => pause()}
+        >
+          Pause
+        </button>
+        <button
+          className="btn rounded-full btn-primary text-white border-2 shadow-md"
+          onClick={() => restart()}
+        >
+          Reset
+        </button>
+      </div>
+    </main>
+  );
+}

src/app/_components/Navbar.tsx

@@ -3,30 +3,24 @@ import Image from "next/image";
 
 export default function NavBar() {
   return (
-    <div className="navbar nav-root">
-      <div className="flex-1">
+    <div className="navbar nav-root px-16 drop-shadow-md">
+      <a className="flex-1" href="/">
         <Image
           src="/pomoparty-logo.png"
           height={50}
           width={200}
           alt="pomoparty-logo"
         />
-      </div>
-      <div className="flex-none">
-        <button className="btn btn-square btn-ghost">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            className="inline-block w-5 h-5 stroke-current"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
-            ></path>
-          </svg>
+      </a>
+      <div className="flex justify-center space-x-6">
+        <a>
+          <button className="text-white">Features</button>
+        </a>
+        <a>
+          <button className="text-white">Sign In</button>
+        </a>
+        <button className="btn rounded-full btn-primary-content text-primary border-2 shadow-md">
+          Sign Up
         </button>
       </div>
     </div>

src/app/globals.css

@@ -17,13 +17,7 @@
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background: #ffff;
 }
 
 @layer utilities {