Horizontal scroller demo page

src/back/routes/demos/horizontal-scroller.css

@@ -0,0 +1,24 @@
+.bignum {
+	font-size: 60px;
+	background-color: aquamarine;
+	color: hsl(159.8, 100%, 39.9%);
+	width: 150px;
+	height: 200px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.horizontal-scroller {
+	.next-button,
+	.prev-button {
+		pointer-events: none;
+		opacity: 0.5;
+	}
+
+	&.has-next .next-button,
+	&.has-prev .prev-button {
+		pointer-events: all;
+		opacity: 1;
+	}
+}

src/back/routes/demos/horizontal-scroller.page.tsx

@@ -0,0 +1,67 @@
+import type { Context } from "koa";
+import { TempstreamJSX } from "tempstream";
+import { Page } from "@sealcode/sealgen";
+import html from "../../html.js";
+import { horizontalScroller } from "../common/horizontal-scroller/horizontal-scroller.js";
+
+export const actionName = "HorizontalScrollerDemo";
+
+export default new (class HorizontalScrollerDemoPage 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,
+			"HorizontalScrollerDemo",
+			<div>
+				<h2>Always scrolls + has buttons</h2>
+				{horizontalScroller({
+					elements: [1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13].map((n) => (
+						<div class="bignum">{n}</div>
+					)),
+					render: async ({ scroller, markers }) => (
+						<div>
+							<div>
+								<button
+									class="prev-button"
+									type="button"
+									data-action="horizontal-scroller#scrollLeft"
+								>
+									{" "}
+									←{" "}
+								</button>
+								<button
+									class="next-button"
+									type="button"
+									data-action="horizontal-scroller#scrollRight"
+								>
+									{" "}
+									→{" "}
+								</button>
+							</div>
+							{scroller}
+							{markers}
+						</div>
+					),
+				})}
+				<h2>Sometimes doesn't scroll, then dots are hidden</h2>
+				{
+					/* HTML */ `<style>
+						.horizontal-scroller--all-visible {
+							.horizontal-scroller__markers {
+								opacity: 0;
+								transition: 200ms;
+							}
+						}
+					</style>`
+				}
+				{horizontalScroller({
+					elements: [1, 2, 3, 4].map((n) => <div class="bignum">{n}</div>),
+				})}
+			</div>
+		);
+	}
+})();