Autogen SolidJS template with auth

2026-02-04 21:37:21 +02:00
parent b2d2409357
commit 5b544f5818
27 changed files with 2063 additions and 0 deletions
--- a/ui/src/components/Nav.tsx
+++ b/ui/src/components/Nav.tsx
@@ -0,0 +1,50 @@
+import { useMatch } from "@solidjs/router";
+import { Show } from "solid-js";
+import { useAuth } from "~/components/Context";
+
+export default function Nav() {
+  const { signedIn, logout } = useAuth();
+  const isHome = useMatch(() => "/");
+  const isAbout = useMatch(() => "/about");
+
+  return (
+    <nav class="fixed top-0 left-0 w-full bg-sky-800 shadow-sm z-50 flex items-center justify-between py-3 px-4 font-medium text-sm">
+      <a
+        href="/"
+        class={`px-3 py-2 text-sky-100 uppercase transition-colors duration-200 border-b-2 ${
+          isHome() ? "border-sky-300 text-white" : "border-transparent hover:text-white"
+        }`}
+      >
+        Home
+      </a>
+      <a
+        href="/about"
+        class={`px-3 py-2 text-sky-100 uppercase transition-colors duration-200 border-b-2 ${
+          isAbout() ? "border-sky-300 text-white" : "border-transparent hover:text-white"
+        }`}
+      >
+        About
+      </a>
+      <Show
+        when={signedIn()}
+        fallback={
+          <a
+            href="/login"
+            class="ml-auto px-4 py-2 text-sky-100 bg-sky-700 border border-sky-600 rounded-md hover:bg-sky-600 hover:text-white focus:outline-none transition-colors duration-200"
+          >
+            Login
+          </a>
+        }
+      >
+        <form action={logout} method="post" class="ml-auto">
+          <button
+            type="submit"
+            class="px-4 py-2 text-sky-100 bg-sky-700 border border-sky-600 rounded-md hover:bg-sky-600 hover:text-white focus:outline-none transition-colors duration-200"
+          >
+            Sign Out
+          </button>
+        </form>
+      </Show>
+    </nav>
+  );
+}