Collage JDD component

src/back/jdd-components/collage/collage.css

@@ -0,0 +1,25 @@
+.collage {
+	display: grid;
+	grid-template-columns: 150px 150px 150px;
+	grid-template-rows: 20px 160px 20px repeat(calc(var(--images-count) - 1), 160px 20px);
+	justify-content: center;
+
+	.collage__image {
+		grid-row: calc(2 * var(--collage-index) + 1) / calc(2 * var(--collage-index) + 4);
+
+		&:nth-child(2n + 1) {
+			grid-column: 1/3;
+		}
+
+		&:nth-child(2n) {
+			grid-column: 2/4;
+		}
+	}
+
+	@container (max-width: 520px) {
+		display: flex !important;
+		flex-flow: column;
+		gap: 16px;
+		align-items: center;
+	}
+}

src/back/jdd-components/collage/collage.jdd.tsx

@@ -0,0 +1,36 @@
+import { TempstreamJSX } from "tempstream";
+import type { ComponentToHTMLArgs } from "@sealcode/jdd";
+import { Component, ComponentArguments } from "@sealcode/jdd";
+
+const component_arguments = {
+	images: new ComponentArguments.List(new ComponentArguments.Image()),
+} as const;
+
+export class Collage extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	async toHTML({
+		args: { images },
+		classes,
+		jdd_context: { render_image },
+	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
+		return (
+			<div
+				class={["collage", ...classes]}
+				style={`--images-count: ${images.length}`}
+			>
+				{images.map((image, index) => (
+					<div class="collage__image" style={`--collage-index: ${index}`}>
+						{render_image(image, {
+							container: { width: 300, height: 200 },
+							crop: { width: 300, height: 200 },
+							alt: "",
+						})}
+					</div>
+				))}
+			</div>
+		);
+	}
+}