Halving countdown

1import type { ComponentProps } from "react";
2 
3import { formatBlockHeight } from "@/lib/bitcoin";
4import { componentClasses } from "@/lib/utils";
5 
6import { panelStyles, type BitcoinVisualProps } from "./shared";
7 
8export type HalvingCountdownProps = Omit<
9  ComponentProps<"section">,
10  "children"
11> &
12  BitcoinVisualProps & {
13    currentHeight: number;
14    halvingHeight: number;
15    estimatedDate?: string;
16    currentSubsidy?: number;
17  };
18 
19export function HalvingCountdown({
20  currentHeight,
21  halvingHeight,
22  estimatedDate,
23  currentSubsidy = 3.125,
24  unstyled,
25  className,
26  ...props
27}: HalvingCountdownProps) {
28  const remaining = Math.max(0, halvingHeight - currentHeight);
29  const nextSubsidy = currentSubsidy / 2;
30 
31  return (
32    <section
33      data-slot="halving-countdown"
34      data-unstyled={unstyled || undefined}
35      aria-label="Bitcoin halving countdown"
36      className={componentClasses(
37        unstyled,
38        [panelStyles, "grid gap-5 p-5"],
39        className,
40      )}
41      {...props}
42    >
43      <div>
44        <p
45          className={componentClasses(
46            unstyled,
47            "text-xs text-[var(--color-muted)]",
48          )}
49        >
50          Next halving
51        </p>
52        <p
53          data-slot="halving-countdown-blocks"
54          className={componentClasses(
55            unstyled,
56            "mt-2 font-mono text-3xl font-medium tabular-nums tracking-[-0.04em]",
57          )}
58        >
59          {formatBlockHeight(remaining)}
60          <span
61            className={componentClasses(
62              unstyled,
63              "ml-2 font-sans text-sm font-normal tracking-normal text-[var(--color-muted)]",
64            )}
65          >
66            blocks
67          </span>
68        </p>
69      </div>
70      <dl
71        className={componentClasses(
72          unstyled,
73          "grid grid-cols-2 gap-4 border-t border-[var(--color-rule-subtle)] pt-4",
74        )}
75      >
76        <div>
77          <dt
78            className={componentClasses(
79              unstyled,
80              "text-xs text-[var(--color-muted)]",
81            )}
82          >
83            Target height
84          </dt>
85          <dd
86            className={componentClasses(
87              unstyled,
88              "mt-1 font-mono text-sm font-medium tabular-nums",
89            )}
90          >
91            {formatBlockHeight(halvingHeight)}
92          </dd>
93        </div>
94        <div>
95          <dt
96            className={componentClasses(
97              unstyled,
98// … truncated