74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
import Link from 'next/link';
|
|
import { getCurrentUser } from '@/lib/server/auth';
|
|
import { t } from '@/lib/i18n';
|
|
import { ThemeToggle } from './ThemeToggle';
|
|
|
|
export async function SiteHeader() {
|
|
const user = await getCurrentUser();
|
|
return (
|
|
<header className="sticky top-0 z-40 px-3 pt-3">
|
|
<div
|
|
className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-4 rounded-2xl border px-3 backdrop-blur-xl"
|
|
style={{
|
|
borderColor: 'color-mix(in srgb, var(--border) 80%, transparent)',
|
|
background: 'color-mix(in srgb, var(--surface) 74%, transparent)',
|
|
boxShadow: 'inset 0 1px 0 0 var(--edge), 0 12px 32px -24px rgb(var(--shadow-color) / 0.5)',
|
|
}}
|
|
>
|
|
<Link href="/" className="flex items-center gap-2.5 pl-1 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))',
|
|
boxShadow: 'inset 0 1px 0 0 rgba(255,255,255,0.25)',
|
|
}}
|
|
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-1 text-sm md:flex" aria-label="Main">
|
|
{[
|
|
{ href: '/', label: t('nav.home') },
|
|
{ href: '/pricing', label: t('nav.pricing') },
|
|
...(user ? [{ href: '/dashboard', label: t('nav.dashboard') }] : []),
|
|
...(user?.role === 'admin' ? [{ href: '/admin', label: t('nav.admin') }] : []),
|
|
].map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="rounded-lg px-3 py-1.5 transition-colors hover:text-[var(--text)]"
|
|
style={{ color: 'var(--text-muted)' }}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<div className="flex items-center gap-2">
|
|
<ThemeToggle />
|
|
{user ? (
|
|
<form action="/api/auth/logout" method="post">
|
|
<button type="submit" className="btn-secondary">
|
|
{t('nav.logout')}
|
|
</button>
|
|
</form>
|
|
) : (
|
|
<>
|
|
<Link href="/login" className="btn-ghost hidden sm:inline-flex">
|
|
{t('nav.login')}
|
|
</Link>
|
|
<Link href="/register" className="btn-primary">
|
|
{t('nav.register')}
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|