68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { useState } from "react";
|
|
import { Link, NavLink } from "react-router-dom";
|
|
import { useCart } from "../state/CartContext";
|
|
import { useAuth } from "../state/AuthContext";
|
|
|
|
export function Layout({ children }: { children: ReactNode }) {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const { itemCount } = useCart();
|
|
const { user, logout } = useAuth();
|
|
|
|
return (
|
|
<div className="app-shell">
|
|
<header className="site-header">
|
|
<Link to="/" className="brand-mark">
|
|
<span className="brand-badge">F</span>
|
|
<span>
|
|
Fluxon
|
|
<small>Visual commerce demo</small>
|
|
</span>
|
|
</Link>
|
|
|
|
<button type="button" className="menu-toggle" onClick={() => setMenuOpen((value) => !value)} aria-label="Toggle menu">
|
|
Menu
|
|
</button>
|
|
|
|
<nav className={`main-nav ${menuOpen ? "open" : ""}`}>
|
|
<NavLink to="/" onClick={() => setMenuOpen(false)}>
|
|
Home
|
|
</NavLink>
|
|
<NavLink to="/products" onClick={() => setMenuOpen(false)}>
|
|
Shop
|
|
</NavLink>
|
|
<NavLink to="/account" onClick={() => setMenuOpen(false)}>
|
|
Account
|
|
</NavLink>
|
|
{user ? (
|
|
<button type="button" className="nav-action" onClick={logout}>
|
|
Logout
|
|
</button>
|
|
) : (
|
|
<NavLink to="/login" onClick={() => setMenuOpen(false)}>
|
|
Login
|
|
</NavLink>
|
|
)}
|
|
<NavLink to="/cart" className="cart-link" onClick={() => setMenuOpen(false)}>
|
|
Cart <span>{itemCount}</span>
|
|
</NavLink>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>{children}</main>
|
|
|
|
<footer className="site-footer">
|
|
<div>
|
|
<strong>Fluxon</strong>
|
|
<p>Frontend demo built to stay presentable even while the API is still evolving.</p>
|
|
</div>
|
|
<div className="footer-grid">
|
|
<span>Hybrid API mode</span>
|
|
<span>Responsive storefront</span>
|
|
<span>Checkout-ready flow</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|