67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import Link from 'next/link';
|
|
import { useRouter } from 'next/router';
|
|
import BaseIcon from './BaseIcon';
|
|
import { mdiStorefrontOutline } from '@mdi/js';
|
|
|
|
const links = [
|
|
{ href: '/marketplace', label: 'Marketplace' },
|
|
{ href: '/contact', label: 'Contact' },
|
|
];
|
|
|
|
export default function PublicSiteHeader() {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<header className="sticky top-0 z-40 border-b border-white/10 bg-[#111111]/90 backdrop-blur-xl">
|
|
<div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8">
|
|
<Link href="/" className="flex items-center gap-3 text-white">
|
|
<span className="flex h-11 w-11 items-center justify-center rounded-2xl border border-[#D4A94E]/30 bg-[#D4A94E]/10 text-[#D4A94E]">
|
|
<BaseIcon path={mdiStorefrontOutline} size={22} />
|
|
</span>
|
|
<span>
|
|
<span className="block text-xs uppercase tracking-[0.35em] text-[#D4A94E]">
|
|
Artisan Marketplace
|
|
</span>
|
|
<span className="block text-sm text-white/70">
|
|
Marketplace craft-focused & espace artisan
|
|
</span>
|
|
</span>
|
|
</Link>
|
|
|
|
<nav className="hidden items-center gap-6 md:flex">
|
|
{links.map((link) => {
|
|
const isActive = router.pathname === link.href;
|
|
|
|
return (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={`text-sm font-medium transition ${
|
|
isActive ? 'text-[#F6E7C1]' : 'text-white/70 hover:text-white'
|
|
}`}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
href="/login"
|
|
className="hidden rounded-full border border-white/15 px-4 py-2 text-sm font-medium text-white transition hover:border-white/30 hover:bg-white/5 sm:inline-flex"
|
|
>
|
|
Espace admin
|
|
</Link>
|
|
<Link
|
|
href="/artisan-auth"
|
|
className="inline-flex rounded-full bg-[#D4A94E] px-4 py-2 text-sm font-semibold text-[#111111] transition hover:bg-[#E4BD6B]"
|
|
>
|
|
Devenir un artisan
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|