@bloxbean/yaci-viewer
Version:
A Cardano blockchain data viewer for developers. It works with the Yaci-Store backend, supporting both a local devnet and public networks.
42 lines (39 loc) • 3.61 kB
JavaScript
import { T as store_get, a0 as ensure_array_like, Z as attr, _ as stringify, X as escape_html, W as unsubscribe_stores, a1 as bind_props, x as pop, v as push } from './index-vBtQgGkr.js';
import './client-x9PZM0zh.js';
import { p as page } from './stores-B4ORdDby.js';
import './exports-DAzLyLdf.js';
function _page($$payload, $$props) {
push();
var $$store_subs;
let activeUrl;
let data = $$props["data"];
let pages = [];
let blockNo = "";
activeUrl = store_get($$store_subs ??= {}, "$page", page).url.searchParams.get("page");
{
pages.forEach((page2) => {
let splitUrl = page2.href.split("?");
let queryString = splitUrl.slice(1).join("?");
const hrefParams = new URLSearchParams(queryString);
let hrefValue = hrefParams.get("page");
if (hrefValue === activeUrl) {
page2.active = true;
} else {
page2.active = false;
}
});
pages = pages;
}
const each_array = ensure_array_like(data.blocks);
$$payload.out += `<section class="container mx-auto mt-4 text-sm"><div class="mb-4 flex justify-center"><form class="flex items-center w-full max-w-lg"><input type="search" id="search"${attr("value", blockNo)} placeholder="Block Number" required class="px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 w-96 mr-2"> <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-r-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">Search</button></form></div></section> <section class="container mx-auto text-sm"><div class="flex flex-wrap justify-between mb-2"><a href="#" class="px-4 py-2 text-blue-500 font-medium rounded-md bg-gray-100 hover:bg-gray-200 transition-colors" role="button">< Previous</a> <a href="#" class="px-4 py-2 text-blue-500 font-medium rounded-md bg-gray-100 hover:bg-gray-200 transition-colors" role="button">Next ></a></div> <div class="overflow-x-auto"><table class="w-full bg-white border border-gray-300"><thead><tr><th class="py-2 px-4 bg-gray-100 font-bold text-center">Blocks</th><th class="py-2 px-4 bg-gray-100 font-bold text-center">Slot</th><th class="py-2 px-4 bg-gray-100 font-bold text-center">Pool</th><th class="py-2 px-4 bg-gray-100 font-bold text-center">Size (kb)</th><th class="py-2 px-4 bg-gray-100 font-bold text-center"># of Txs</th></tr></thead><tbody><!--[-->`;
for (let index = 0, $$length = each_array.length; index < $$length; index++) {
let block = each_array[index];
$$payload.out += `<tr${attr("class", index % 2 === 0 ? "bg-gray-50" : "bg-white")}><td class="py-2 px-4 text-center"><a${attr("href", `/blocks/${stringify(block.number)}`)} class="text-blue-500">${escape_html(block.number)}</a></td><td class="py-2 px-4 text-center">${escape_html(block.slot)}</td><td class="py-2 px-4 text-center">${escape_html(block.slot_leader)}</td><td class="py-2 px-4 text-center">${escape_html(block.size / 1e3)}</td><td class="py-2 px-4 text-center">${escape_html(block.tx_count)}</td></tr>`;
}
$$payload.out += `<!--]--></tbody></table></div> <div class="flex flex-wrap justify-between mt-2 mb-4"><a href="#" class="px-4 py-2 text-blue-500 font-medium rounded-md bg-gray-100 hover:bg-gray-200 transition-colors" role="button">< Previous</a> <a href="#" class="px-4 py-2 text-blue-500 font-medium rounded-md bg-gray-100 hover:bg-gray-200 transition-colors" role="button">Next ></a></div></section>`;
if ($$store_subs) unsubscribe_stores($$store_subs);
bind_props($$props, { data });
pop();
}
export { _page as default };
//# sourceMappingURL=_page.svelte-Blhun9M6.js.map