split-view.jdd.tsx
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

split-view.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 = {
	component1: new ComponentArguments.NestedComponent(),
	component2: new ComponentArguments.NestedComponent(),
	} as const;

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

	getCSSClumps(
	jdd_context: JDDContext,
	args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
	) {
	const result = [
	...ComponentArguments.NestedComponent.getCSSClumpsForNested(
	jdd_context,
	(args?.component1 as Record<string, unknown>) \|\| {}
	),
	...ComponentArguments.NestedComponent.getCSSClumpsForNested(
	jdd_context,
	(args?.component2 as Record<string, unknown>) \|\| {}
	),
	];
	return result;
	}

	async toHTML({
	args: { component1, component2 },
	classes,
	jdd_context,
	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
	return (
	<div class={["split-view", ...classes]}>
	<div class="split-view__wrapper">
	<div class="split-view__half">
	{ComponentArguments.NestedComponent.render({
	jdd_context,
	data: component1 as Record<string, unknown>,
	})}
	</div>
	<div class="split-view__half">
	{ComponentArguments.NestedComponent.render({
	jdd_context,
	data: component2 as Record<string, unknown>,
	})}
	</div>
	</div>
	</div>
	);
	}
	}