Add sale countdown timer expiring next Sunday

- Created SaleCountdown component with real-time countdown - Displays days, hours, minutes, seconds until sale ends - Responsive design with fire emoji and urgency messaging - Auto-calculates next Sunday at 23:59:59 - Positioned prominently above filament table
2025-07-06 02:55:08 +02:00
parent bf2b80f6dc
commit f0ea3e963a
3 changed files with 108 additions and 0 deletions
--- a/src/components/SaleCountdown.tsx
+++ b/src/components/SaleCountdown.tsx
@@ -0,0 +1,99 @@
+'use client'
+
+import { useState, useEffect } from 'react';
+
+interface TimeLeft {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+}
+
+export function SaleCountdown() {
+  const [timeLeft, setTimeLeft] = useState<TimeLeft>({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+
+    const calculateTimeLeft = (): TimeLeft => {
+      // Get next Sunday at 23:59:59
+      const now = new Date();
+      const nextSunday = new Date();
+      const daysUntilSunday = (7 - now.getDay()) % 7;
+      const targetDay = daysUntilSunday === 0 ? 7 : daysUntilSunday; // If today is Sunday, target next Sunday
+      
+      nextSunday.setDate(now.getDate() + targetDay);
+      nextSunday.setHours(23, 59, 59, 999);
+
+      const difference = nextSunday.getTime() - now.getTime();
+
+      if (difference > 0) {
+        return {
+          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+          minutes: Math.floor((difference / 1000 / 60) % 60),
+          seconds: Math.floor((difference / 1000) % 60)
+        };
+      }
+
+      return { days: 0, hours: 0, minutes: 0, seconds: 0 };
+    };
+
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    // Initial calculation
+    setTimeLeft(calculateTimeLeft());
+
+    return () => clearInterval(timer);
+  }, [mounted]);
+
+  if (!mounted) {
+    return <div className="h-24" />; // Placeholder to prevent hydration mismatch
+  }
+
+  const isActive = timeLeft.days > 0 || timeLeft.hours > 0 || timeLeft.minutes > 0 || timeLeft.seconds > 0;
+
+  if (!isActive) return null;
+
+  return (
+    <div className="bg-gradient-to-r from-red-500 to-red-600 text-white py-4 px-6 rounded-lg shadow-lg mb-8 animate-pulse">
+      <div className="text-center">
+        <h3 className="text-lg sm:text-xl font-bold mb-2">🔥 AKCIJA SE ZAVRŠAVA!</h3>
+        <p className="text-sm sm:text-base mb-3">Popust od 5% važi još:</p>
+        
+        <div className="flex justify-center gap-2 sm:gap-4">
+          <div className="bg-white/20 backdrop-blur rounded-lg px-2 sm:px-3 py-2 min-w-[60px] sm:min-w-[70px]">
+            <div className="text-xl sm:text-2xl font-bold">{timeLeft.days}</div>
+            <div className="text-xs sm:text-sm opacity-90">dana</div>
+          </div>
+          
+          <div className="bg-white/20 backdrop-blur rounded-lg px-2 sm:px-3 py-2 min-w-[60px] sm:min-w-[70px]">
+            <div className="text-xl sm:text-2xl font-bold">{timeLeft.hours.toString().padStart(2, '0')}</div>
+            <div className="text-xs sm:text-sm opacity-90">sati</div>
+          </div>
+          
+          <div className="bg-white/20 backdrop-blur rounded-lg px-2 sm:px-3 py-2 min-w-[60px] sm:min-w-[70px]">
+            <div className="text-xl sm:text-2xl font-bold">{timeLeft.minutes.toString().padStart(2, '0')}</div>
+            <div className="text-xs sm:text-sm opacity-90">min</div>
+          </div>
+          
+          <div className="bg-white/20 backdrop-blur rounded-lg px-2 sm:px-3 py-2 min-w-[60px] sm:min-w-[70px]">
+            <div className="text-xl sm:text-2xl font-bold">{timeLeft.seconds.toString().padStart(2, '0')}</div>
+            <div className="text-xs sm:text-sm opacity-90">sek</div>
+          </div>
+        </div>
+        
+        <p className="text-xs sm:text-sm mt-3 opacity-90">
+          Poruči sada i uštedi na Bambu Lab filamentima!
+        </p>
+      </div>
+    </div>
+  );
+}