website_next: part 9

website_next/explore/block/transactions/index.js

@@ -0,0 +1,38 @@
+import { formatBlockFill, formatBytes, formatNumber } from "../format.js";
+
+/** @typedef {import("../../../modules/brk-client/index.js").BlockInfoV1} Block */
+
+/**
+ * @param {string} label
+ * @param {string | Node} value
+ */
+function createBlockMetaItem(label, value) {
+  const item = document.createElement("div");
+  const name = document.createElement("span");
+  const data = document.createElement("strong");
+
+  name.textContent = label;
+  data.append(value);
+  item.append(name, data);
+
+  return item;
+}
+
+/** @param {Block} block */
+export function createTransactionPane(block) {
+  const { extras } = block;
+  const meta = document.createElement("div");
+
+  meta.dataset.blockMeta = "";
+  meta.append(
+    createBlockMetaItem(
+      "Block",
+      `${formatBytes(block.size)} · ${formatBlockFill(block.weight)}`,
+    ),
+    createBlockMetaItem("Tx", formatNumber(block.txCount)),
+    createBlockMetaItem("Input", formatNumber(extras.totalInputs)),
+    createBlockMetaItem("Output", formatNumber(extras.totalOutputs)),
+  );
+
+  return meta;
+}

website_next/explore/block/transactions/style.css

@@ -1,12 +1,10 @@
-#block-details section[data-group="preview"] {
-  [data-block-meta] {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
-    gap: 1.5rem;
-    min-width: 0;
-  }
+[data-block-meta] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
+  gap: 1.5rem;
+  min-width: 0;
 
-  [data-block-meta-item] {
+  > div {
     display: flex;
     gap: 0.5rem;
     align-items: baseline;
@@ -34,9 +32,7 @@
 }
 
 @media (max-width: 48rem) {
-  #block-details section[data-group="preview"] {
-    [data-block-meta] {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
+  [data-block-meta] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }