Files
craft2prints/src/components/Header.tsx
T
AndymickandClaude Haiku 4.5 6c8d34edde Add admin menu link to header when authenticated
- Check isAdminAuthenticated() in Header component
- Show 'Admin' link to /admin/orders when user is logged in as admin
- Allows quick navigation to admin section after login

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-16 20:31:22 +01:00

89 lines
3.2 KiB
TypeScript

import Link from 'next/link';
import Image from 'next/image';
import CartButton from './CartButton';
import AccountMenu from './AccountMenu';
import ThemeToggle from './ThemeToggle';
import NavDropdown from './NavDropdown';
import CurrencySelector from './CurrencySelector';
import MobileNav from './MobileNav';
import { prisma } from '@/lib/prisma';
import { getCurrentCustomer } from '@/lib/auth';
import { isAdminAuthenticated } from '@/lib/adminAuth';
export default async function Header() {
const [categories, collections, customer, isAdmin] = await Promise.all([
prisma.category.findMany({
where: { showOnPersonalised: true },
orderBy: { name: 'asc' },
}),
prisma.collection.findMany({ orderBy: { name: 'asc' } }),
getCurrentCustomer(),
isAdminAuthenticated(),
]);
const personalisedLinks = [
{ href: '/made-to-order', label: 'Shop all' },
...categories.map((c) => ({ href: `/made-to-order?category=${c.slug}`, label: c.name })),
];
const shopBySections = [
{
title: 'Occasions',
links: collections
.filter((c) => c.group === 'OCCASION')
.map((c) => ({ href: `/made-to-order?collection=${c.slug}`, label: c.name })),
},
{
title: 'Gifts for',
links: collections
.filter((c) => c.group === 'RECIPIENT')
.map((c) => ({ href: `/made-to-order?collection=${c.slug}`, label: c.name })),
},
];
return (
<header className="sticky top-0 z-40 border-b border-line bg-paper/90 backdrop-blur">
<div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3 sm:px-6 sm:py-4">
<div className="flex items-center gap-3">
<MobileNav
personalisedLinks={personalisedLinks}
shopBySections={shopBySections}
customer={customer ? { name: customer.name, email: customer.email } : null}
/>
<Link href="/" className="flex items-center gap-2 sm:gap-3">
<Image
src="/logo.png"
alt="Craft2Prints"
width={96}
height={96}
className="h-12 w-12 object-contain sm:h-20 sm:w-20"
/>
<span className="font-script text-3xl leading-none text-ink sm:text-5xl">Craft2Prints</span>
</Link>
</div>
<nav className="hidden items-center gap-6 md:flex">
<NavDropdown label="Personalised" links={personalisedLinks} />
<Link href="/products" className="tag-label hover:text-ink">
Products
</Link>
<NavDropdown label="Shop by" sections={shopBySections} />
<Link href="/gallery" className="tag-label hover:text-ink">
Gallery
</Link>
</nav>
<div className="flex items-center gap-2 sm:gap-4">
<CurrencySelector />
{isAdmin && (
<Link href="/admin/orders" className="tag-label hover:text-ink">
Admin
</Link>
)}
<div className="hidden md:block">
<AccountMenu customer={customer ? { name: customer.name, email: customer.email } : null} />
</div>
<ThemeToggle />
<CartButton />
</div>
</div>
</header>
);
}