prepare settings modal navigation

2026-04-08 21:03:36 +00:00
parent b94216e4c0
commit 9883160113
9 changed files with 264 additions and 138 deletions
@@ -0,0 +1,33 @@
+import "./splitModal.css";
+
+import * as React from "bloatless-react";
+
+export function SplitModal(
+    leftView: React.State<Element>,
+    rightView: React.State<Element>,
+    scrollButtonLabel: React.State<string>,
+) {
+    const view = (
+        <div class="split-modal">
+            <div>
+                <div class="scroll-area" children:set={leftView}></div>
+                <div class="detail-button-wrapper">
+                    <button class="ghost" on:click={scrollToDetails}>
+                        <span
+                            class="ellipsis"
+                            subscribe:innerText={scrollButtonLabel}
+                        ></span>
+                        <span class="icon">arrow_forward</span>
+                    </button>
+                </div>
+            </div>
+            <div class="scroll-area" children:set={rightView}></div>
+        </div>
+    );
+
+    function scrollToDetails() {
+        view.scrollLeft = view.scrollWidth;
+    }
+
+    return view;
+}