Flip clock

1"use client";
2 
3import { useEffect, useState } from "react";
4import FlipClock from "@/registry/8starlabs-ui/blocks/flip-clock";
5 
6const DAY = 1000 * 60 * 60 * 24;
7 
8export default function FlipClockShowDaysDemo() {
9  const [targets, setTargets] = useState<{
10    oneDay: Date;
11    fiveHundredDays: Date;
12  }>();
13 
14  useEffect(() => {
15    const now = Date.now();
16 
17    setTargets({
18      oneDay: new Date(now + DAY),
19      fiveHundredDays: new Date(now + DAY * 500)
20    });
21  }, []);
22 
23  return (
24    <div className="flex flex-col gap-8">
25      {/* Always show days, even if zero */}
26      <FlipClock
27        countdown={true}
28        showDays="always"
29        targetDate={targets?.oneDay}
30        size={"md"}
31      />
32      {/* Show days only if non-zero */}
33      <FlipClock
34        countdown={true}
35        showDays="auto"
36        targetDate={targets?.oneDay}
37        size={"md"}
38      />
39      {/* Never show days, even if 1 or more */}
40      <FlipClock
41        countdown={true}
42        showDays="never"
43        targetDate={targets?.fiveHundredDays}
44        size={"md"}
45      />
46    </div>
47  );
48}