Block card

1import { Box, Database, Scale, Timer } from "lucide-react";
2import type { ComponentProps } from "react";
3 
4import {
5  formatBlockHeight,
6  formatBytes,
7  formatRelativeTime,
8  formatTimestamp,
9  formatWeight,
10  toDate,
11  type BitcoinBlock,
12} from "@/lib/bitcoin";
13import { componentClasses } from "@/lib/utils";
14 
15import { BitcoinAmount } from "./bitcoin-amount";
16import { HashDisplay } from "./hash-display";
17import { panelStyles, type BitcoinVisualProps } from "./shared";
18 
19export type BlockCardProps = Omit<ComponentProps<"article">, "children"> &
20  BitcoinVisualProps & {
21    block: BitcoinBlock;
22    hashHref?: string;
23    now?: number | Date;
24  };
25 
26export function BlockCard({
27  block,
28  hashHref,
29  now,
30  unstyled,
31  className,
32  ...props
33}: BlockCardProps) {
34  const timestamp = formatTimestamp(block.timestamp);
35 
36  return (
37    <article
38      data-slot="block-card"
39      data-unstyled={unstyled || undefined}
40      className={componentClasses(
41        unstyled,
42        [panelStyles, "grid min-w-0 gap-5 p-5"],
43        className,
44      )}
45      {...props}
46    >
47      <header
48        data-slot="block-card-header"
49        className={componentClasses(
50          unstyled,
51          "flex min-w-0 items-start justify-between gap-4",
52        )}
53      >
54        <div className="min-w-0">
55          <p
56            className={componentClasses(
57              unstyled,
58              "text-xs text-[var(--color-muted)]",
59            )}
60          >
61            Block
62          </p>
63          <h3
64            className={componentClasses(
65              unstyled,
66              "mt-1 font-mono text-xl font-medium tabular-nums tracking-[-0.03em]",
67            )}
68          >
69            {formatBlockHeight(block.height)}
70          </h3>
71        </div>
72        <time
73          dateTime={toDate(block.timestamp).toISOString()}
74          title={timestamp}
75          className={componentClasses(
76            unstyled,
77            "shrink-0 text-xs text-[var(--color-muted)]",
78          )}
79        >
80          {formatRelativeTime(block.timestamp, now)}
81        </time>
82      </header>
83      <HashDisplay
84        value={block.hash}
85        label="Block hash"
86        href={hashHref}
87        unstyled={unstyled}
88      />
89      <dl
90        data-slot="block-card-stats"
91        className={componentClasses(
92          unstyled,
93          "grid grid-cols-2 gap-x-5 gap-y-4 border-t border-[var(--color-rule-subtle)] pt-4",
94        )}
95      >
96        <BlockMetric
97          icon={Database}
98// … truncated