1 files changed, 37 insertions, 0 deletions

diff --git a/src/ui/base/SplitLayout.tsx b/src/ui/base/SplitLayout.tsx
new file mode 100644
index 0000000..65dff2d
--- /dev/null
+++ b/src/ui/base/SplitLayout.tsx
@@ -0,0 +1,37 @@
+import { SiteHeader } from "$/ui/components/SiteHeader.tsx";
+import { SplitView } from "$/ui/layouts/SplitView.tsx";
+import { SplitViewPanel } from "$/ui/layouts/SplitViewPanel.tsx";
+import { Heading } from "$/ui/objects/Heading.tsx";
+
+import type { Props as BaseLayoutProps } from "./BaseLayout.tsx";
+
+import { BaseLayout } from "./BaseLayout.tsx";
+
+export interface Props extends BaseLayoutProps {
+        "content"?: JSX.Element;
+        "header-end"?: JSX.Element;
+}
+
+export const SplitLayout = ({
+        children,
+        page,
+        content,
+        "header-end": headerEnd,
+        ...props
+}: Props) => (
+        <BaseLayout page={page} {...props}>
+                <SiteHeader mode="compact" url={page.url} end={headerEnd}>
+                        <div class="l-media__block l-media__block--main">
+                                <Heading class="u-mbs-0 u-elp">{page.data.title}</Heading>
+                        </div>
+                </SiteHeader>
+
+                <SplitView as="main" class="l-container l-container--pad-i l-container--pad-b u-pbs-400">
+                        <SplitViewPanel sticky side="25" min="200">
+                                {children}
+                        </SplitViewPanel>
+
+                        <SplitViewPanel>{content}</SplitViewPanel>
+                </SplitView>
+        </BaseLayout>
+);