66 lines
2.4 KiB
TypeScript
66 lines
2.4 KiB
TypeScript
import Link from 'next/link';
|
|
import { getCurrentUser } from '@/lib/server/auth';
|
|
import { t } from '@/lib/i18n';
|
|
import { ThemeToggle } from './ThemeToggle';
|
|
|
|
const links = [
|
|
{ href: '/features', label: t('nav.features') },
|
|
{ href: '/pricing', label: t('nav.pricing') },
|
|
{ href: '/blog', label: t('nav.blog') },
|
|
{ href: '/about', label: t('nav.about') },
|
|
{ href: '/contact', label: t('nav.contact') },
|
|
];
|
|
|
|
export async function SiteHeader() {
|
|
const user = await getCurrentUser();
|
|
return (
|
|
<header
|
|
className="sticky top-0 z-40 border-b backdrop-blur-xl"
|
|
style={{
|
|
borderColor: 'color-mix(in srgb, var(--border) 85%, transparent)',
|
|
background: 'color-mix(in srgb, var(--surface) 78%, transparent)',
|
|
}}
|
|
>
|
|
<div className="page flex h-16 items-center justify-between gap-4">
|
|
<Link href="/" className="flex items-center gap-2.5 text-[15px] font-semibold tracking-tight">
|
|
<span
|
|
className="grid h-8 w-8 place-items-center rounded-xl text-white"
|
|
style={{ background: 'linear-gradient(140deg, var(--color-brand-500), var(--color-brand-700))' }}
|
|
aria-hidden
|
|
>
|
|
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M12 3.5l8 4.5-8 4.5-8-4.5 8-4.5z" />
|
|
<path d="M4 12.5l8 4.5 8-4.5" />
|
|
</svg>
|
|
</span>
|
|
{t('brand.name')}
|
|
</Link>
|
|
<nav className="hidden items-center gap-6 text-sm md:flex" aria-label="Main">
|
|
{links.map((l) => (
|
|
<Link key={l.href} href={l.href} className="transition-colors hover:text-[var(--text)]" style={{ color: 'var(--text-muted)' }}>
|
|
{l.label}
|
|
</Link>
|
|
))}
|
|
{user?.role === 'admin' && (
|
|
<Link href="/admin" className="transition-colors hover:text-[var(--text)]" style={{ color: 'var(--text-muted)' }}>
|
|
{t('nav.admin')}
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
<div className="flex items-center gap-2">
|
|
<ThemeToggle />
|
|
{user ? (
|
|
<Link href="/dashboard" className="btn-secondary">
|
|
{t('nav.dashboard')}
|
|
</Link>
|
|
) : (
|
|
<Link href="/login" className="btn-primary">
|
|
{t('nav.login')}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|