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 FlipClockCountdownDemo() {
9  const [targets, setTargets] = useState<{
10    oneDay: Date;
11    tenDays: Date;
12    fiveHundredDays: Date;
13  }>();
14 
15  useEffect(() => {
16    const now = Date.now();
17 
18    setTargets({
19      oneDay: new Date(now + DAY),
20      tenDays: new Date(now + DAY * 10),
21      fiveHundredDays: new Date(now + DAY * 500)
22    });
23  }, []);
24 
25  return (
26    <div className="flex flex-col gap-8">
27      {/* 1 day ahead */}
28      <FlipClock countdown={true} targetDate={targets?.oneDay} size={"md"} />
29 
30      {/* 10 days ahead */}
31      <FlipClock
32        variant="secondary"
33        countdown={true}
34        targetDate={targets?.tenDays}
35        size={"md"}
36      />
37 
38      {/* 500 days ahead */}
39      <FlipClock
40        variant="muted"
41        countdown={true}
42        targetDate={targets?.fiveHundredDays}
43        size={"md"}
44      />
45    </div>
46  );
47}