website_next: part 9

2026-07-10 02:28:13 -07:00 · 2026-07-08 11:24:52 +02:00
parent 15fbdc168f
commit a43b00c12c
48 changed files with 1756 additions and 1042 deletions
@@ -0,0 +1,67 @@
+import { createUsdAmount, renderUsdAmount } from "../../../usd/index.js";
+import { formatDateTime } from "../format.js";
+import { createBlockTitle } from "../title/index.js";
+
+/** @typedef {import("../../../modules/brk-client/index.js").BlockInfoV1} Block */
+
+/** @param {string} hash */
+function createHashElement(hash) {
+  const element = document.createElement("span");
+  const prefix = document.createElement("span");
+  const value = document.createElement("span");
+  const firstNonZero = hash.search(/[^0]/);
+  const visibleStart = firstNonZero === -1 ? hash.length : firstNonZero;
+
+  element.dataset.blockHash = "";
+  prefix.dataset.dim = "";
+  prefix.textContent = hash.slice(0, visibleStart);
+  value.textContent = hash.slice(visibleStart);
+  element.append(prefix, value);
+
+  return element;
+}
+
+/** @param {Node[]} [actions] */
+export function createBlockHeader(actions = []) {
+  const element = document.createElement("header");
+  const titleRow = document.createElement("div");
+  const main = document.createElement("div");
+  const title = document.createElement("h1");
+  const side = document.createElement("div");
+  const actionList = document.createElement("div");
+  const date = document.createElement("time");
+  const hash = document.createElement("p");
+  const price = createUsdAmount("output", 0, {
+    tone: "positive",
+  });
+
+  element.dataset.blockHeader = "";
+  title.dataset.blockTitleText = "";
+  main.dataset.blockMain = "";
+  titleRow.dataset.blockTitle = "";
+  side.dataset.blockSide = "";
+  actionList.dataset.blockActions = "";
+  date.dataset.blockDate = "";
+  hash.dataset.blockHashLine = "";
+  actionList.append(...actions);
+  side.append(date, price, actionList);
+  main.append(title, hash);
+  titleRow.append(main, side);
+  element.append(titleRow);
+
+  /** @param {Block} block */
+  function update(block) {
+    title.replaceChildren(...createBlockTitle(block.height));
+    date.dateTime = new Date(block.timestamp * 1_000).toISOString();
+    date.textContent = formatDateTime(block.timestamp);
+    hash.replaceChildren(createHashElement(block.id));
+    renderUsdAmount(price, block.extras.price, {
+      tone: "positive",
+    });
+  }
+
+  return /** @type {const} */ ({
+    element,
+    update,
+  });
+}
@@ -0,0 +1,70 @@
+[data-block-header] {
+  --block-title-height-color: var(--gray);
+  --block-title-height-line-height: var(--line-height-lg);
+  --block-title-height-size: var(--font-size-lg);
+  --block-title-label-size: 2.5rem;
+
+  display: grid;
+  padding-bottom: 1.25rem;
+
+  [data-dim] {
+    opacity: 0.5;
+  }
+
+  [data-block-title] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.35rem 1rem;
+    align-items: start;
+    min-width: 0;
+  }
+
+  [data-block-main] {
+    display: grid;
+    gap: 0.15rem;
+    min-width: 0;
+  }
+
+  [data-block-date],
+  [data-block-hash-line] {
+    color: var(--gray);
+  }
+
+  [data-block-date] {
+    white-space: nowrap;
+    text-align: right;
+  }
+
+  [data-block-side] {
+    display: grid;
+    gap: 0.15rem;
+    justify-items: end;
+    min-width: max-content;
+  }
+
+  [data-block-actions] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 0;
+
+    button {
+      padding: 0.375rem 0.5rem;
+      font-size: var(--font-size-xs);
+      line-height: 1;
+    }
+
+    [data-receipt-button] {
+      padding: 0.25rem 0.375rem;
+    }
+  }
+
+  [data-block-hash-line] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}