show-first-row.page.tsx
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

show-first-row.page.tsx
View Options

	import type { Context } from "koa";
	import { TempstreamJSX } from "tempstream";
	import { Page } from "@sealcode/sealgen";
	import html from "../../html.js";
	import { showFirstRow } from "../common/show-first-row/show-first-row.js";

	export const actionName = "ShowFirstRowDemo";

	function makeBoxStyle() {
	return `width: 100%; max-width: 200px; height: ${
	100 + Math.random() * 100
	}px; margin: auto; background-color: lime; text-align: center; color: #0000009e; font-size: 40px; padding-top: 20px; box-sizing: border-box;`;
	}

	export default new (class ShowFirstRowDemoPage extends Page {
	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	async canAccess(_: Context) {
	return { canAccess: true, message: "" };
	}

	async render(ctx: Context) {
	return html(
	ctx,
	"ShowFirstRowDemo",
	<div>
	<h1>showFirstRow() demo</h1>
	<h2> 9 elements (always overflows)</h2>
	{showFirstRow({
	items: [1, 2, 3, 4, 5, 6, 7, 8, 9].map((e) => (
	<div style={makeBoxStyle()}>{e}</div>
	)),
	})}
	<h2> 3 elements (overflow depends on screen width)</h2>
	{showFirstRow({
	items: [1, 2, 3].map((e) => <div style={makeBoxStyle()}>{e}</div>),
	})}
	</div>
	);
	}
	})();