1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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>
)
}
|
