Fix timer hydration

src/components/timers/Timer.tsx

@@ -10,6 +10,11 @@ export default function Timer({
   targetDate: Date;
 }) {
   const [timeLeft, setTimeLeft] = useState(targetDate.getTime() - Date.now());
+  const [mounted, setMounted] = useState<boolean>(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -29,16 +34,24 @@ export default function Timer({
     const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
     const days = Math.floor(totalSeconds / 86400);
     const hours = Math.floor((totalSeconds % 86400) / 3600);
-    // const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    // const seconds = totalSeconds % 60;
+    const seconds = totalSeconds % 60;
 
-    return `${days} days ${hours.toString()} hours`;
+    return [
+      `${days} days ${hours.toString()} hours`,
+      `${minutes.toString()} minutes ${seconds.toString()} seconds`,
+    ];
   };
 
+  if (!mounted) {
+    return null;
+  }
+
   return (
     <div>
       <p>{name}</p>
-      <p className="text-4xl">{formatTime(timeLeft)}</p>
+      <p className="text-4xl text-wrap">{formatTime(timeLeft)[0]}</p>
+      <p className="text-4xl text-wrap">{formatTime(timeLeft)[1]}</p>
     </div>
   );
 }