Countdown Timer

1'use client';
2import React, { useState, useEffect, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Code2, Clock } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function CountdownTimerSection() {
29  const initialDiff = 12 * 86400000 + 5 * 3600000 + 48 * 60000 + 22 * 1000;
30  const [diff, setDiff] = useState(initialDiff);
31
32  useEffect(() => {
33    let remaining = initialDiff;
34    const tick = () => {
35      remaining = Math.max(0, remaining - 1000);
36      setDiff(remaining);
37    };
38    const timer = window.setInterval(tick, 1000);
39    return () => window.clearInterval(timer);
40  }, []);
41
42  const days = Math.floor(diff / 86400000);
43  const hours = Math.floor((diff % 86400000) / 3600000);
44  const minutes = Math.floor((diff % 3600000) / 60000);
45  const seconds = Math.floor((diff % 60000) / 1000);
46
47  const pad = (n: number) => String(n).padStart(2, '0');
48
49  return (
50    <SectionCard title="Countdown Timer" sourceSlug="/ui/source/ui-elements/countdown-timer">
51      <div className="space-y-5">
52        {/* Large Countdown */}
53        <div className="flex items-center gap-3">
54          {[
55            { label: 'Days', value: pad(days) },
56            { label: 'Hours', value: pad(hours) },
57            { label: 'Minutes', value: pad(minutes) },
58            { label: 'Seconds', value: pad(seconds) },
59          ].map((unit, i) => (
60            <React.Fragment key={unit.label}>
61              {i > 0 && <span className="text-2xl font-bold text-gray-300 dark:text-gray-600">:</span>}
62              <div className="flex flex-col items-center">
63                <div className="flex size-16 items-center justify-center rounded-xl bg-gray-100 dark:bg-white/5">
64                  <span className="text-2xl font-bold text-gray-800 dark:text-white/90">{unit.value}</span>
65                </div>
66                <span className="mt-1 text-[10px] font-medium uppercase text-gray-400">{unit.label}</span>
67              </div>
68            </React.Fragment>
69          ))}
70        </div>
71        {/* Compact */}
72        <div className="inline-flex items-center gap-2 rounded-xl bg-brand-50 px-4 py-2.5 dark:bg-brand-500/10">
73          <Clock className="size-4 text-brand-500" />
74          <span className="text-sm font-semibold text-brand-600 dark:text-brand-400">{pad(days)}d {pad(hours)}h {pad(minutes)}m {pad(seconds)}s</span>
75          <span className="text-xs text-brand-500/70">remaining</span>
76        </div>
77      </div>
78    </SectionCard>
79  );
80}