Add split-view component

src/back/jdd-components/split-view/split-view.css

@@ -0,0 +1,23 @@
+.split-view {
+	width: 100%;
+
+	.split-view__wrapper {
+		display: flex;
+		flex-flow: row nowrap;
+		gap: 24px;
+
+		@container (max-width: 640px) {
+			flex-flow: column;
+		}
+	}
+
+	.split-view__half {
+		flex-basis: 50%;
+		container-type: inline-size;
+		box-sizing: border-box;
+		display: flex;
+		flex-flow: row;
+		align-items: center;
+		justify-content: center;
+	}
+}

src/back/jdd-components/split-view/split-view.jdd.tsx

@@ -0,0 +1,60 @@
+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,
+							component1 as Record<string, unknown>
+						)}
+					</div>
+					<div class="split-view__half">
+						{ComponentArguments.NestedComponent.render(
+							jdd_context,
+							component2 as Record<string, unknown>
+						)}
+					</div>
+				</div>
+			</div>
+		);
+	}
+}