style upgrades

src/components/countdown.tsx

@@ -1,6 +1,7 @@
 import useNow from '@/hooks/use-now';
 import { Text, Group } from '@mantine/core';
 import { useMemo } from 'react';
+import classes from './countdown.module.css';
 
 interface CountdownProps {
   date: Date;
@@ -17,7 +18,7 @@ interface TimeLeft {
 
 function calculateTimeLeft(targetDate: Date, currentTime = new Date()): TimeLeft {
   const difference = targetDate.getTime() - currentTime.getTime();
-  
+
   if (difference <= 0) {
     return { days: 0, hours: 0, minutes: 0, seconds: 0 };
   }
@@ -30,28 +31,45 @@ function calculateTimeLeft(targetDate: Date, currentTime = new Date()): TimeLeft
   };
 }
 
+const pad = (num: number) => num.toString().padStart(2, '0');
+
 export function Countdown({ date, label, color }: CountdownProps) {
   const now = useNow();
   const timeLeft = useMemo(() => calculateTimeLeft(date, now), [date, now]);
 
-  const formatTime = () => {
-    const pad = (num: number) => num.toString().padStart(2, '0');
-    
-    if (timeLeft.days > 0) {
-      return `${timeLeft.days}d ${pad(timeLeft.hours)}:${pad(timeLeft.minutes)}:${pad(timeLeft.seconds)}`;
-    } else {
-      return `${pad(timeLeft.hours)}:${pad(timeLeft.minutes)}:${pad(timeLeft.seconds)}`;
-    }
-  };
+  const totalSecondsLeft = Math.max(
+    0,
+    Math.floor((date.getTime() - now.getTime()) / 1000)
+  );
+  const isFinalStretch = totalSecondsLeft > 0 && totalSecondsLeft <= 10;
+
+  const prefix =
+    timeLeft.days > 0
+      ? `${timeLeft.days}d ${pad(timeLeft.hours)}:${pad(timeLeft.minutes)}:`
+      : `${pad(timeLeft.hours)}:${pad(timeLeft.minutes)}:`;
 
   return (
     <Group gap="xs">
       {label && <Text size='sm' fw={500}>{label}:</Text>}
-      <Text size='sm' fw={600} c={color} ff="monospace">
-        {formatTime()}
+      <Text
+        size='sm'
+        fw={600}
+        c={isFinalStretch ? 'red' : color}
+        ff="monospace"
+        className={classes.time}
+      >
+        {prefix}
+        <span
+          key={timeLeft.seconds}
+          className={`${classes.seconds} ${
+            isFinalStretch ? classes.finalTick : classes.tick
+          }`}
+        >
+          {pad(timeLeft.seconds)}
+        </span>
       </Text>
     </Group>
   );
 }
 
-export default Countdown;
+export default Countdown;