Page MenuHomeSealhub
Files F10359955

No OneTemporary
Actions

View Options

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>
+ );
+ }
+}

File Metadata

Mime Type
text/x-diff
Expires
Sat, Nov 8, 03:29 (16 h, 42 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1033967
Default Alt Text
(2 KB)

Event Timeline