ordered-pictogram-tiles.jdd.tsx
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

ordered-pictogram-tiles.jdd.tsx
View Options

	import type { FlatTemplatable } from "tempstream";
	import { TempstreamJSX } from "tempstream";
	import type { ComponentToHTMLArgs } from "@sealcode/jdd";
	import { Component, ComponentArguments } from "@sealcode/jdd";

	const component_arguments = {
	elements: new ComponentArguments.List(
	new ComponentArguments.Structured({
	color: new ComponentArguments.Enum(["white", "accent", "accent2"]),
	iconPath: new ComponentArguments.Image(),
	iconAlt: new ComponentArguments.ShortText(),
	title: new ComponentArguments.ShortText(),
	description: new ComponentArguments.Markdown(),
	})
	),
	} as const;

	export class OrderedPictogramTiles extends Component<typeof component_arguments> {
	getArguments() {
	return component_arguments;
	}

	toHTML({
	args: { elements },
	jdd_context: { render_image, render_markdown, language },
	}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
	return (
	<section>
	<ol class="pictogram-tiles">
	{elements.map((element, index) => (
	<li
	class={`pictogram-tiles__tile pictogram-tiles__tile--${element.color}`}
	>
	<div class="pictogram-tiles__content">
	<div class="pictogram-tiles__upperSection">
	<span>
	{(index + 1).toLocaleString("en-US", {
	minimumIntegerDigits: 2,
	useGrouping: false,
	})}
	</span>
	{render_image(element.iconPath, {
	container: {
	height: 200,
	width: 200,
	objectFit: "cover",
	},
	alt: element.iconAlt,
	})}
	</div>
	<div class="pictogram-tiles__lowerSection">
	<h3>{element.title}</h3>
	{render_markdown(language, element.description)}
	</div>
	</div>
	</li>
	))}
	</ol>
	</section>
	);
	}
	}