nice-box.jdd.tsx
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

nice-box.jdd.tsx
View Options

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

	const component_arguments = {
	title: new ComponentArguments.ShortText(),
	content: new ComponentArguments.Markdown(),
	images: new ComponentArguments.List(
	new ComponentArguments.Structured({
	image: new ComponentArguments.Image(),
	alt: new ComponentArguments.ShortText(),
	})
	),
	} as const;

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

	getTitle(
	_: JDDContext,
	args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
	) {
	return args.title \|\| null;
	}

	async toHTML({
	args: { title, content, images },
	classes,
	jdd_context: { render_markdown, render_image, language },
	index,
	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
	return (
	<div class={["nice-box", ...classes]} style={`--jdd-index: ${index}`}>
	<h2>{title}</h2>
	<div>{render_markdown(language, content)}</div>
	{images.map((image) =>
	render_image(image.image, {
	container: {
	width: 200,
	height: 200,
	objectFit: "contain",
	},
	alt: image?.alt \|\| "",
	})
	)}
	</div>
	);
	}
	}