From 09e3ab3247fb9047350d7edb9ad821a02feab829 Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Mon, 3 Mar 2025 18:24:56 +0100
Subject: [PATCH] Add split-view component

---
 .../jdd-components/split-view/split-view.css  | 23 +++++++
 .../split-view/split-view.jdd.tsx             | 60 +++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 src/back/jdd-components/split-view/split-view.css
 create mode 100644 src/back/jdd-components/split-view/split-view.jdd.tsx

diff --git a/src/back/jdd-components/split-view/split-view.css b/src/back/jdd-components/split-view/split-view.css
new file mode 100644
index 0000000..d3a8c79
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/src/back/jdd-components/split-view/split-view.jdd.tsx b/src/back/jdd-components/split-view/split-view.jdd.tsx
new file mode 100644
index 0000000..e242bfd
--- /dev/null
+++ b/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>
+		);
+	}
+}