From 6d707dc71f8f1224594d8157e214dceeff52c1e7 Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Wed, 5 Jun 2024 14:04:30 +0200
Subject: [PATCH] Add journey page

---
 src/routes/index.tsx   |  5 ++-
 src/routes/journey.tsx | 90 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/journey.tsx

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 21a4599..7a73e94 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -189,7 +189,10 @@ export default function Home() {
         </label>
       </fieldset> */}
       </main>
-      <form class="fixed inset-x-0 bottom-0 col-start-1 mx-1 animate-fly-in space-y-5 rounded-t-extra-large bg-light-surface-container-high p-4 px-4">
+      <form
+        action="/journey"
+        class="fixed inset-x-0 bottom-0 col-start-1 mx-1 animate-fly-in space-y-5 rounded-t-extra-large bg-light-surface-container-high p-4 px-4"
+      >
         {/* As the naviation UI is bottom to top, we should make the search use the same to be not confusing.
         Also don't you first think of where you want to go and not where you are right now? */}
         {/* animation moving bottom sheet for search into view to get focus from user */}
diff --git a/src/routes/journey.tsx b/src/routes/journey.tsx
new file mode 100644
index 0000000..9c42ea4
--- /dev/null
+++ b/src/routes/journey.tsx
@@ -0,0 +1,90 @@
+import { For, type JSX } from "solid-js";
+
+/**
+ * A recursive component building the tree of connections
+ * @param {Connection} connection
+ * @returns {JSX.Element}
+ */
+function Connection({ label, connections }: Connection): JSX.Element {
+  return (
+    <div class="flex w-full  shrink-0 snap-x snap-mandatory snap-center flex-col-reverse overscroll-contain bg-light-primary/10 text-center">
+      <p>{label}</p>
+      <div class="flex snap-x snap-mandatory snap-always gap-4 overflow-x-auto overscroll-contain">
+        <For each={connections}>{Connection}</For>
+      </div>
+    </div>
+  );
+}
+
+export default function Journey() {
+  return (
+    <main class="row-span-2 flex snap-x snap-mandatory snap-always gap-4 overflow-x-auto overscroll-contain bg-light-primary/10 p-4">
+      <For each={connections}>{Connection}</For>
+    </main>
+  );
+}
+
+type Connection = {
+  label: string;
+  connections: Connection[];
+};
+
+const connections: Connection[] = [
+  {
+    label: "Connection 1",
+    connections: [
+      {
+        label: "Connection 1.1",
+        connections: [
+          {
+            label: "Connection 1.1.1",
+            connections: [],
+          },
+          {
+            label: "Connection 1.1.2",
+            connections: [
+              {
+                label: "Connection 1.1.2.1",
+                connections: [],
+              },
+              {
+                label: "Connection 1.1.2.2",
+                connections: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Connection 1.2",
+        connections: [],
+      },
+    ],
+  },
+  {
+    label: "Connection 2",
+    connections: [
+      {
+        label: "Connection 2.1",
+        connections: [],
+      },
+      {
+        label: "Connection 2.2",
+        connections: [],
+      },
+    ],
+  },
+  {
+    label: "Connection 3",
+    connections: [
+      {
+        label: "Connection 3.1",
+        connections: [],
+      },
+      {
+        label: "Connection 3.2",
+        connections: [],
+      },
+    ],
+  },
+];
-- 
2.51.2