{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "block-card",
  "title": "Block card",
  "description": "Compact Bitcoin block summary.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "dennisonbertram/bitcoin-ui/bitcoin-amount",
    "dennisonbertram/bitcoin-ui/hash-display"
  ],
  "files": [
    {
      "path": "components/bitcoin/block-card.tsx",
      "content": "import { Box, Database, Scale, Timer } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  formatBlockHeight,\n  formatBytes,\n  formatRelativeTime,\n  formatTimestamp,\n  formatWeight,\n  toDate,\n  type BitcoinBlock,\n} from \"@/lib/bitcoin\";\nimport { componentClasses } from \"@/lib/utils\";\n\nimport { BitcoinAmount } from \"./bitcoin-amount\";\nimport { HashDisplay } from \"./hash-display\";\nimport { panelStyles, type BitcoinVisualProps } from \"./shared\";\n\nexport type BlockCardProps = Omit<ComponentProps<\"article\">, \"children\"> &\n  BitcoinVisualProps & {\n    block: BitcoinBlock;\n    hashHref?: string;\n    now?: number | Date;\n  };\n\nexport function BlockCard({\n  block,\n  hashHref,\n  now,\n  unstyled,\n  className,\n  ...props\n}: BlockCardProps) {\n  const timestamp = formatTimestamp(block.timestamp);\n\n  return (\n    <article\n      data-slot=\"block-card\"\n      data-unstyled={unstyled || undefined}\n      className={componentClasses(\n        unstyled,\n        [panelStyles, \"grid min-w-0 gap-5 p-5\"],\n        className,\n      )}\n      {...props}\n    >\n      <header\n        data-slot=\"block-card-header\"\n        className={componentClasses(\n          unstyled,\n          \"flex min-w-0 items-start justify-between gap-4\",\n        )}\n      >\n        <div className=\"min-w-0\">\n          <p\n            className={componentClasses(\n              unstyled,\n              \"text-xs text-[var(--color-muted)]\",\n            )}\n          >\n            Block\n          </p>\n          <h3\n            className={componentClasses(\n              unstyled,\n              \"mt-1 font-mono text-xl font-medium tabular-nums tracking-[-0.03em]\",\n            )}\n          >\n            {formatBlockHeight(block.height)}\n          </h3>\n        </div>\n        <time\n          dateTime={toDate(block.timestamp).toISOString()}\n          title={timestamp}\n          className={componentClasses(\n            unstyled,\n            \"shrink-0 text-xs text-[var(--color-muted)]\",\n          )}\n        >\n          {formatRelativeTime(block.timestamp, now)}\n        </time>\n      </header>\n      <HashDisplay\n        value={block.hash}\n        label=\"Block hash\"\n        href={hashHref}\n        unstyled={unstyled}\n      />\n      <dl\n        data-slot=\"block-card-stats\"\n        className={componentClasses(\n          unstyled,\n          \"grid grid-cols-2 gap-x-5 gap-y-4 border-t border-[var(--color-rule-subtle)] pt-4\",\n        )}\n      >\n        <BlockMetric\n          icon={Database}\n          label=\"Transactions\"\n          value={new Intl.NumberFormat(\"en-US\").format(block.transactionCount)}\n          unstyled={unstyled}\n        />\n        <BlockMetric\n          icon={Box}\n          label=\"Size\"\n          value={formatBytes(block.size)}\n          unstyled={unstyled}\n        />\n        <BlockMetric\n          icon={Scale}\n          label=\"Weight\"\n          value={formatWeight(block.weight)}\n          unstyled={unstyled}\n        />\n        {block.feeTotal !== undefined ? (\n          <div>\n            <dt\n              className={componentClasses(\n                unstyled,\n                \"text-xs text-[var(--color-muted)]\",\n              )}\n            >\n              Fees\n            </dt>\n            <dd className={componentClasses(unstyled, \"mt-1\")}>\n              <BitcoinAmount\n                value={block.feeTotal}\n                unit=\"btc\"\n                maximumFractionDigits={4}\n                unstyled={unstyled}\n              />\n            </dd>\n          </div>\n        ) : (\n          <BlockMetric\n            icon={Timer}\n            label=\"Miner\"\n            value={block.miner ?? \"Unknown\"}\n            unstyled={unstyled}\n          />\n        )}\n      </dl>\n      {block.miner ? (\n        <p\n          data-slot=\"block-card-miner\"\n          className={componentClasses(\n            unstyled,\n            \"border-t border-[var(--color-rule-subtle)] pt-4 text-xs text-[var(--color-muted)]\",\n          )}\n        >\n          Mined by{\" \"}\n          <span className=\"font-medium text-[var(--color-ink)]\">\n            {block.miner}\n          </span>\n        </p>\n      ) : null}\n    </article>\n  );\n}\n\nfunction BlockMetric({\n  icon: Icon,\n  label,\n  value,\n  unstyled,\n}: {\n  icon: typeof Box;\n  label: string;\n  value: string;\n  unstyled?: boolean;\n}) {\n  return (\n    <div>\n      <dt\n        className={componentClasses(\n          unstyled,\n          \"flex items-center gap-1.5 text-xs text-[var(--color-muted)]\",\n        )}\n      >\n        <Icon aria-hidden=\"true\" className=\"size-3\" />\n        {label}\n      </dt>\n      <dd\n        className={componentClasses(\n          unstyled,\n          \"mt-1 overflow-hidden text-ellipsis whitespace-nowrap font-mono text-sm font-medium tabular-nums\",\n        )}\n      >\n        {value}\n      </dd>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}