import * as React from 'react'; import { useState, useEffect, useRef } from 'react'; import { Button } from '@/components/ui/button'; import { X } from 'lucide-react'; interface Countdown { days: number; hours: number; minutes: number; seconds: number; } function calculateTimeLeft(target: Date): Countdown { const now = new Date().getTime(); const distance = target.getTime() - now; if (distance <= 0) { return { days: 0, hours: 0, minutes: 0, seconds: 0 }; } return { days: Math.floor(distance / (1000 * 60 * 60 * 24)), hours: Math.floor((distance / (1000 * 60 * 60)) % 24), minutes: Math.floor((distance / (1000 * 60)) % 60), seconds: Math.floor((distance / 1000) % 60), }; } export default function LimitedTimeOfferBanner() { const targetRef = useRef(new Date()); if (!targetRef.current) { targetRef.current = new Date(); targetRef.current.setDate(targetRef.current.getDate() + 3); } else if (targetRef.current.getTime() === new Date().getTime()) { targetRef.current.setDate(targetRef.current.getDate() + 3); } const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(targetRef.current)); const [visible, setVisible] = useState(true); useEffect(() => { const timer = setInterval(() => { setTimeLeft(calculateTimeLeft(targetRef.current)); }, 1000); return () => clearInterval(timer); }, []); if (!visible) return null; return (

⏰ Limited-time Offer!

Hurry up, this deal ends in{' '} {timeLeft.days}d {timeLeft.hours}h {timeLeft.minutes}m {timeLeft.seconds}s

); }

Limited time offer banner