chore: initial import
This commit is contained in:
66
frontend/components/SiteLayout.js
Normal file
66
frontend/components/SiteLayout.js
Normal file
@@ -0,0 +1,66 @@
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
import { useCart } from '../context/CartContext';
|
||||
|
||||
const NAV_LINKS = [
|
||||
{ href: '/', label: 'Home' },
|
||||
{ href: '/products', label: 'Products' },
|
||||
{ href: '/cart', label: 'Cart' },
|
||||
];
|
||||
|
||||
export default function SiteLayout({ children }) {
|
||||
const router = useRouter();
|
||||
const { itemCount } = useCart();
|
||||
|
||||
return (
|
||||
<div className="site-shell">
|
||||
<header className="site-header">
|
||||
<div className="site-header__inner">
|
||||
<Link href="/" className="logo">
|
||||
<img src="/logo.png" alt="Full Moon Bakehouse" />
|
||||
<span>Full Moon Bakehouse</span>
|
||||
</Link>
|
||||
|
||||
<nav className="nav-links">
|
||||
{NAV_LINKS.map((link) => {
|
||||
const isActive = router.pathname === link.href || router.pathname.startsWith(`${link.href}/`);
|
||||
const isCart = link.href === '/cart';
|
||||
|
||||
return (
|
||||
<Link key={link.href} href={link.href} className={isActive ? 'active' : ''}>
|
||||
{link.label}
|
||||
{isCart && itemCount > 0 ? <span className="badge">{itemCount}</span> : null}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="header-actions">
|
||||
<Link href="/admin" className="ghost-btn">
|
||||
Admin
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="site-main">{children}</main>
|
||||
|
||||
<footer className="site-footer">
|
||||
<div className="site-footer__inner">
|
||||
<div>
|
||||
<strong>Full Moon Bakehouse</strong>
|
||||
<p>Eau Claire & Altoona, Wisconsin</p>
|
||||
</div>
|
||||
<div className="footer-links">
|
||||
<Link href="mailto:bonna@fullmoonbakehouse.com">bonna@fullmoonbakehouse.com</Link>
|
||||
<Link href="https://www.instagram.com" target="_blank" rel="noreferrer">
|
||||
Instagram
|
||||
</Link>
|
||||
</div>
|
||||
<span className="copyright">© {new Date().getFullYear()} Full Moon Bakehouse</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user