From 0a5ba7f121ae13733c85705ad5fc0d6a2fb51f06 Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Fri, 4 Oct 2024 20:15:03 +0200
Subject: [PATCH] Style main page with placeholders

---
 app/index.html                    |  2 +-
 app/src/components/Onboarding.jsx |  3 +-
 app/src/components/TopAppBar.jsx  | 18 ++++++++++
 app/src/routes/index.jsx          | 60 +++++++++++++++++++++++++++++--
 4 files changed, 78 insertions(+), 5 deletions(-)
 create mode 100644 app/src/components/TopAppBar.jsx
diff --git a/app/index.html b/app/index.html
index 108249d..c6f83f3 100644
--- a/app/index.html
+++ b/app/index.html
@@ -8,7 +8,7 @@
     <title>Melt</title>
 </head>
 
-<body>
+<body class="h-dvh">
     <script type="module" src="/src/index.jsx"></script>
 </body>
 
diff --git a/app/src/components/Onboarding.jsx b/app/src/components/Onboarding.jsx
index 3dac0d7..6b71f91 100644
--- a/app/src/components/Onboarding.jsx
+++ b/app/src/components/Onboarding.jsx
@@ -23,7 +23,7 @@ export default function ({ setName }) {
   }
 
   return (
-    <main class="h-dvh grid content-end sm:content-center px-4 sm:px-6 pb-4 sm:pb-6 ">
+    <main class="h-dvh grid content-end sm:content-center px-4 sm:px-6 pb-4 sm:pb-6">
       <hgroup class="sm:mx-auto sm:w-full sm:max-w-sm text-center">
         <img
           class="mx-auto h-10 w-auto"
@@ -62,6 +62,7 @@ export default function ({ setName }) {
           />
         </label>
 
+        {/* Overengineered buttons styles is just fun. Some of this should probably be done in CSS or added Tailwind CSS utilitties. Follows Material You Filled Button specification*/}
         <button
           type="submit"
           class="w-full rounded-full bg-light-primary dark:bg-dark-primary px-6 py-2.5 text-label-lg font-label-lg leading-label-lg
diff --git a/app/src/components/TopAppBar.jsx b/app/src/components/TopAppBar.jsx
new file mode 100644
index 0000000..90ba40f
--- /dev/null
+++ b/app/src/components/TopAppBar.jsx
@@ -0,0 +1,18 @@
+/** @import { JSX, VoidProps } from "solid-js" */
+
+/**
+ *
+ * @param {VoidProps<{header: string, leadingAction?: JSX.Element, trailingAction?: JSX.Element}>} properties
+ * @returns {JSX.Element}
+ */
+export default function TopAppBar({ header, leadingAction, trailingAction }) {
+  return (
+    <header class="px-1 min-h-16 py-2 grid grid-cols-[3rem,1fr,3rem] gap-1 bg-light-surface-container dark:bg-dark-surface-container">
+      {leadingAction}
+      <h1 class="text-xl col-start-2 font-normal content-center text-center">
+        {header}
+      </h1>
+      {trailingAction}
+    </header>
+  );
+}
diff --git a/app/src/routes/index.jsx b/app/src/routes/index.jsx
index 1aa29c8..f6d6fca 100644
--- a/app/src/routes/index.jsx
+++ b/app/src/routes/index.jsx
@@ -1,6 +1,7 @@
-import { Show } from "solid-js";
+import { For, Show } from "solid-js";
 import Onboarding from "../components/Onboarding";
 import { useAppContext } from "../components/AppContext";
+import TopAppBar from "../components/TopAppBar";
 //@ts-expect-error TS6192 Can not handle new JSDoc syntax (yet?)
 // https://devblogs.microsoft.com/typescript/announcing-typescript-5-5/#the-jsdoc-@import-tag
 /** @import { Signal, JSX, Accessor } from "solid-js" */
@@ -21,8 +22,61 @@ export default function () {
       }
     >
       <>
-        <h1>Welcome {app.name}</h1>
-        <a href="/invite">Invite</a>
+        <TopAppBar
+          header="Meal"
+          trailingAction={
+            <button
+              onClick={() => {
+                setApp("name", null);
+                setApp("isOnboarded", false);
+              }}
+              class="p-3 text-light-on-surface-variant dark:text-dark-on-surface-variant"
+            >
+              <span class="sr-only">sign out</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="24px"
+                viewBox="0 -960 960 960"
+                width="24px"
+                aria-hidden="true"
+                fill="currentColor"
+              >
+                <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z" />
+              </svg>
+            </button>
+          }
+        />
+        {/* <main class="bg-light-surface dark:bg-dark-surface h-full mx-4 sm:mx-6 mb-4 sm:mb-6 rounded-"> */}
+        {/* <h1>Welcome {app.name}</h1> */}
+        {/* <a href="/invite">Invite</a> */}
+        {/* </main> */}
+
+        <main>
+          <ol class="grid grid-cols-[auto_1fr_auto]">
+            <For each={new Array(100)}>
+              {() => (
+                <li class="ps-4 pe-6 grid grid-cols-subgrid col-span-3 gap-x-4 py-3">
+                  <span class="size-10 bg-dark-surface-container-high rounded-full text-center content-center text-title-md text-light-on-surface dark:text-dark-on-surface">
+                    C
+                  </span>
+                  <hgroup>
+                    <h2 class="text-light-on-surface dark:text-dark-on-surface-variant text-body-lg ">
+                      Headline
+                    </h2>
+                    <p class="text-light-on-surface-variant dark:text-dark-on-surface-variant line-clamp-1 text-ellipsis text-body-md">
+                      Supporting text that is long enough to fill up multiple
+                      lines
+                      {/* Supporting text */}
+                    </p>
+                  </hgroup>
+                  <p class="text-light-on-surface-variant dark:text-dark-on-surface-variant text-label-sm">
+                    Now
+                  </p>
+                </li>
+              )}
+            </For>
+          </ol>
+        </main>
       </>
     </Show>
   );
-- 
2.51.2

