Sale Countdown Promo Bar

1"use client"
2 
3import { useEffect, useState } from "react"
4import { Button } from "@/components/ui/button"
5import { IconPlaceholder } from "@/components/icons/icon-placeholder"
6 
7const SALE_DURATION_MS =
8  2 * 24 * 60 * 60 * 1000 + 11 * 60 * 60 * 1000 + 34 * 60 * 1000 + 12 * 1000
9 
10type TimeLeft = {
11  days: number
12  hours: number
13  minutes: number
14  seconds: number
15}
16 
17function getTimeLeft(diffMs: number): TimeLeft {
18  const diff = Math.max(0, diffMs)
19  const totalSeconds = Math.floor(diff / 1000)
20  return {
21    days: Math.floor(totalSeconds / 86400),
22    hours: Math.floor((totalSeconds % 86400) / 3600),
23    minutes: Math.floor((totalSeconds % 3600) / 60),
24    seconds: totalSeconds % 60,
25  }
26}
27 
28function pad(value: number): string {
29  return value.toString().padStart(2, "0")
30}
31 
32export default function AnnouncementBlock() {
33  const [timeLeft, setTimeLeft] = useState<TimeLeft>(() =>
34    getTimeLeft(SALE_DURATION_MS)
35  )
36 
37  useEffect(() => {
38    const deadline = Date.now() + SALE_DURATION_MS
39    const interval = setInterval(() => {
40      setTimeLeft(getTimeLeft(deadline - Date.now()))
41    }, 1000)
42 
43    return () => clearInterval(interval)
44  }, [])
45 
46  return (
47    <section className="flex min-h-svh w-full flex-col bg-muted/30 text-foreground">
48      <div className="w-full bg-primary text-primary-foreground">
49        <div className="mx-auto flex w-full max-w-6xl flex-col items-center gap-3 px-6 py-3 sm:flex-row sm:justify-between">
50          <div className="flex flex-col items-center gap-2.5 sm:flex-row sm:gap-3">
51            <span className="flex items-center gap-2 text-sm font-semibold">
52              <IconPlaceholder
53                lucide="Flame"
54                tabler="IconFlame"
55                hugeicons="FireIcon"
56                phosphor="Fire"
57                remixicon="RiFireLine"
58                className="size-4 shrink-0"
59                aria-hidden="true"
60              />
61              Summer Sale, up to 40% off
62            </span>
63            <span className="hidden h-4 w-px bg-primary-foreground/30 sm:block" />
64            <span className="flex items-center gap-2 text-sm">
65              <span className="text-primary-foreground/80">Sale ends in</span>
66              <span className="flex items-center gap-1 font-mono text-sm font-semibold tabular-nums">
67                <span className="rounded-md bg-primary-foreground/15 px-1.5 py-0.5">
68                  {pad(timeLeft.days)}d
69                </span>
70// … truncated