first commit

apps/frontend/src/components/shell.tsx

@@ -0,0 +1,55 @@
+import { A } from "@solidjs/router";
+import { ParentComponent, Show } from "solid-js";
+import { useAuth } from "../providers/auth-provider";
+import { useI18n } from "../providers/i18n-provider";
+
+export const Shell: ParentComponent = (props) => {
+  const auth = useAuth();
+  const i18n = useI18n();
+
+  return (
+    <div class="min-h-screen">
+      <header class="mx-auto flex max-w-7xl items-center justify-between px-6 py-6">
+        <A class="text-lg font-semibold tracking-tight" href="/">
+          Bookra
+        </A>
+        <nav class="flex items-center gap-3 text-sm text-slate">
+          <A class="rounded-full border border-black/10 px-4 py-2 hover:border-ember" href="/dashboard">
+            {i18n.t("nav.dashboard")}
+          </A>
+          <A class="rounded-full border border-black/10 px-4 py-2 hover:border-ember" href="/book/studio-atelier">
+            {i18n.t("nav.booking")}
+          </A>
+          <button
+            class="rounded-full border border-black/10 px-4 py-2 hover:border-pine"
+            onClick={() => i18n.toggleLocale()}
+            type="button"
+          >
+            {i18n.locale().toUpperCase()}
+          </button>
+          <Show
+            when={auth.session()}
+            fallback={
+              <button
+                class="rounded-full bg-ink px-4 py-2 text-canvas"
+                onClick={() => void auth.signInDemo()}
+                type="button"
+              >
+                {i18n.t("auth.signIn")}
+              </button>
+            }
+          >
+            <button
+              class="rounded-full border border-black/10 px-4 py-2"
+              onClick={() => void auth.signOut()}
+              type="button"
+            >
+              {i18n.t("auth.signOut")}
+            </button>
+          </Show>
+        </nav>
+      </header>
+      <main class="mx-auto max-w-7xl px-6 pb-16">{props.children}</main>
+    </div>
+  );
+};