"use client";

import { TargetCountdown } from "@countryclub/ui-react";
import { useMemo } from "react";

const SEGMENTS = ["Days", "Hours", "Min", "Sec"] as const;

export default function TargetCountdownDemo() {
  const target = useMemo(
    () => new Date(Date.now() + 27 * 24 * 60 * 60 * 1000),
    [],
  );

  return (
    <div className="flex flex-col items-center gap-4">
      <p className="font-medium text-sm">
        Member–Guest Invitational tees off in
      </p>
      <TargetCountdown target={target}>
        {(duration: {
          days?: number;
          hours?: number;
          minutes?: number;
          seconds?: number;
        } | null) => {
          const values: Record<(typeof SEGMENTS)[number], number> = {
            Days: duration?.days ?? 0,
            Hours: duration?.hours ?? 0,
            Min: duration?.minutes ?? 0,
            Sec: duration?.seconds ?? 0,
          };
          return (
            <div className="flex gap-2">
              {SEGMENTS.map((segment) => {
                const value = String(values[segment]).padStart(2, "0");
                return (
                  <div
                    className="flex w-16 flex-col items-center overflow-hidden rounded-lg border bg-card py-2"
                    key={segment}
                  >
                    {/* Re-keying on the value remounts the span each tick, so
                        tw-animate-css plays a quick slide+fade as it changes. */}
                    <span
                      className="animate-in fade-in slide-in-from-top-2 font-semibold text-2xl tabular-nums duration-300"
                      key={value}
                    >
                      {value}
                    </span>
                    <span className="text-muted-foreground text-xs">
                      {segment}
                    </span>
                  </div>
                );
              })}
            </div>
          );
        }}
      </TargetCountdown>
    </div>
  );
}
Target Countdown

Import

Default
