Deadline Countdown

1"use client"
2 
3import * as React from "react"
4 
5const TOTAL_SEGMENTS = 24
6const DAY_MS = 24 * 60 * 60 * 1000
7 
8/** Edit dates and labels after install. */
9const CONTENT = {
10  title: "Deadline",
11  targetDate: "2026-12-31",
12  startDate: "2026-01-01",
13  unitLabel: "days",
14  progressLabel: "to deadline",
15}
16 
17function parseIso(iso: string) {
18  return new Date(iso.length <= 10 ? `${iso}T00:00:00Z` : iso)
19}
20 
21function daysBetween(fromIso: string, toIso: string) {
22  return Math.round(
23    (parseIso(toIso).getTime() - parseIso(fromIso).getTime()) / DAY_MS
24  )
25}
26 
27function daysFromNow(iso: string) {
28  const now = new Date()
29  const target = parseIso(iso)
30  return Math.max(0, Math.ceil((target.getTime() - now.getTime()) / DAY_MS))
31}
32 
33function formatFullDate(iso: string) {
34  return new Intl.DateTimeFormat("en-US", {
35    year: "numeric",
36    month: "long",
37    day: "numeric",
38    timeZone: "UTC",
39  }).format(parseIso(iso))
40}
41 
42/** Inlined CountUp helper — self-contained registry block. */
43function CountUp({
44  value,
45  duration = 1200,
46  className,
47  ariaLabel,
48}: {
49  value: number
50  duration?: number
51  className?: string
52  ariaLabel?: string
53}) {
54  const ref = React.useRef<HTMLSpanElement | null>(null)
55  const [display, setDisplay] = React.useState(0)
56  const startedRef = React.useRef(false)
57 
58  React.useEffect(() => {
59    const node = ref.current
60    if (!node) return
61 
62    const reduced =
63      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
64    if (reduced) {
65      setDisplay(value)
66      return
67    }
68 
69    let raf = 0
70    const start = () => {
71      if (startedRef.current) return
72      startedRef.current = true
73      const t0 = performance.now()
74      const from = 0
75      const to = value
76      const ease = (t: number) => 1 - Math.pow(1 - t, 4)
77 
78      const step = (now: number) => {
79        const t = Math.min(1, (now - t0) / duration)
80        setDisplay(Math.round(from + (to - from) * ease(t)))
81        if (t < 1) raf = requestAnimationFrame(step)
82      }
83      raf = requestAnimationFrame(step)
84    }
85 
86    if (typeof IntersectionObserver === "undefined") {
87      start()
88      return () => cancelAnimationFrame(raf)
89    }
90 
91    const io = new IntersectionObserver(
92      (entries) => {
93        if (entries[0]?.isIntersecting) {
94          start()
95          io.disconnect()
96        }
97      },
98      { threshold: 0.3 }
99    )
100    io.observe(node)
101    return () => {
102      io.disconnect()
103      cancelAnimationFrame(raf)
104    }
105  }, [value, duration])
106 
107  return (
108    <span
109// … truncated