61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
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>
|
|
);
|
|
}
|
|
}
|