Block list

1import type { ComponentProps } from "react";
2 
3import {
4  formatBlockHeight,
5  formatRelativeTime,
6  type BitcoinBlock,
7} from "@/lib/bitcoin";
8import { componentClasses } from "@/lib/utils";
9 
10import { HashDisplay } from "./hash-display";
11import { type BitcoinVisualProps } from "./shared";
12 
13export type BlockListProps = Omit<ComponentProps<"ol">, "children"> &
14  BitcoinVisualProps & {
15    blocks: BitcoinBlock[];
16    now?: number | Date;
17    getHref?: (block: BitcoinBlock) => string | undefined;
18  };
19 
20export function BlockList({
21  blocks,
22  now,
23  getHref,
24  unstyled,
25  className,
26  ...props
27}: BlockListProps) {
28  return (
29    <ol
30      data-slot="block-list"
31      data-unstyled={unstyled || undefined}
32      className={componentClasses(
33        unstyled,
34        "m-0 list-none divide-y divide-[var(--color-rule-subtle)] p-0",
35        className,
36      )}
37      {...props}
38    >
39      {blocks.map((block) => (
40        <li
41          key={block.hash}
42          data-slot="block-list-item"
43          className={componentClasses(
44            unstyled,
45            "grid min-w-0 gap-3 py-4 first:pt-0 last:pb-0 sm:grid-cols-[7rem_minmax(0,1fr)_auto] sm:items-center",
46          )}
47        >
48          <span
49            className={componentClasses(
50              unstyled,
51              "font-mono text-sm font-medium tabular-nums",
52            )}
53          >
54            {formatBlockHeight(block.height)}
55          </span>
56          <HashDisplay
57            value={block.hash}
58            label="Block hash"
59            href={getHref?.(block)}
60            unstyled={unstyled}
61          />
62          <span
63            className={componentClasses(
64              unstyled,
65              "text-xs text-[var(--color-muted)] sm:text-right",
66            )}
67          >
68            {block.transactionCount.toLocaleString("en-US")} tx
69            <span aria-hidden="true"> · </span>
70            <span className="sr-only">, </span>
71            {formatRelativeTime(block.timestamp, now)}
72          </span>
73        </li>
74      ))}
75    </ol>
76  );
77}