items-list component

src/back/jdd-components/items-list/items-list.css

@@ -0,0 +1,20 @@
+.items-list {
+	overflow-x: scroll;
+
+	&.items-list--mode-horizontal {
+		display: flex;
+		flex-flow: row nowrap;
+		gap: 16px;
+	}
+
+	.items-list__item {
+		background-color: var(--color-brand-text-bg);
+		color: var(--color-brand-text-fg);
+		padding: 16px;
+		min-width: 260px;
+
+		.items-list__item__title {
+			font-size: 32px;
+		}
+	}
+}

src/back/jdd-components/items-list/items-list.jdd.tsx

@@ -0,0 +1,53 @@
+import { TempstreamJSX } from "tempstream";
+import type { ComponentToHTMLArgs } from "@sealcode/jdd";
+import { Component, ComponentArguments } from "@sealcode/jdd";
+import { Collection } from "sealious";
+
+const component_arguments = {
+	mode: new ComponentArguments.Enum(["horizontal"]),
+	collection: new ComponentArguments.ShortText().setExampleValues(["pages"]),
+	title_field: new ComponentArguments.ShortText().setExampleValues(["title"]),
+	text_content_field: new ComponentArguments.ShortText().setExampleValues([
+		"description",
+	]),
+	count: new ComponentArguments.ShortText().setExampleValues(["3", "5"]),
+} as const;
+
+interface OptimisticCollectionItem {
+	get: (name: string) => string;
+}
+
+export class ItemsList extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	async toHTML({
+		args: { mode, collection, title_field, text_content_field },
+		classes,
+		jdd_context: { render_markdown, render_image, language, ctx },
+	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
+		classes.push(`items-list--mode-${mode}`);
+		const collections = ctx.$app.collections;
+		const { items } = await collections[collection as keyof typeof collections]
+			.list(ctx.$context)
+			.fetch();
+		return (
+			<div class={["items-list", ...classes]}>
+				{items.map((item) => (
+					<div class="items-list__item">
+						<span class="items-list__item__title">
+							{(item as OptimisticCollectionItem).get(title_field)}
+						</span>
+						<div>
+							{render_markdown(
+								language,
+								(item as OptimisticCollectionItem).get(text_content_field)
+							)}
+						</div>
+					</div>
+				))}
+			</div>
+		);
+	}
+}