1 files changed, 77 insertions, 0 deletions
diff --git a/storefront/components/Layout.js b/storefront/components/Layout.js
new file mode 100644
index 0000000..dce09eb
--- /dev/null
+++ b/storefront/components/Layout.js
@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import { medusaClient } from "../lib/medusa-client"
+import { clearStoredToken, getStoredToken } from "../lib/storefront"
+
+export default function Layout({ children }) {
+  const [isLoggedIn, setIsLoggedIn] = useState(false)
+
+  useEffect(() => {
+    const token = getStoredToken()
+    if (token) {
+      medusaClient.setToken(token)
+      setIsLoggedIn(true)
+    }
+  }, [])
+
+  const handleLogout = () => {
+    clearStoredToken()
+    medusaClient.setToken(null)
+    setIsLoggedIn(false)
+  }
+
+  return (
+    <div style={{ minHeight: "100vh", fontFamily: "sans-serif", background: "#f8f8f8" }}>
+      <header
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "1rem 2rem",
+          background: "#fff",
+          borderBottom: "1px solid #e6e6e6",
+        }}
+      >
+        <Link href="/" style={{ fontWeight: 600, textDecoration: "none", color: "#222" }}>
+          Lucien-sens-bon
+        </Link>
+        <nav style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
+          <Link href="/" style={{ textDecoration: "none", color: "#444" }}>
+            Boutique
+          </Link>
+          <Link href="/cart" style={{ textDecoration: "none", color: "#444" }}>
+            Panier
+          </Link>
+          <Link href="/checkout" style={{ textDecoration: "none", color: "#444" }}>
+            Commander
+          </Link>
+          {!isLoggedIn ? (
+            <>
+              <Link href="/register" style={{ textDecoration: "none", color: "#444" }}>
+                Créer un compte
+              </Link>
+              <Link href="/login" style={{ textDecoration: "none", color: "#444" }}>
+                Se connecter
+              </Link>
+            </>
+          ) : (
+            <button
+              type="button"
+              onClick={handleLogout}
+              style={{
+                border: "1px solid #ccc",
+                background: "#fff",
+                borderRadius: "6px",
+                padding: "0.4rem 0.8rem",
+                cursor: "pointer",
+              }}
+            >
+              Se déconnecter
+            </button>
+          )}
+        </nav>
+      </header>
+      <main style={{ padding: "2rem" }}>{children}</main>
+    </div>
+  )
+}