site-header.tsx71 lines · main
1import Image from 'next/image';
2import Link from 'next/link';
3
4import { LandingUserMenu } from '../landing-user-menu';
5
6interface SiteHeaderUser {
7 name: string | null;
8 email: string;
9 image: string | null;
10 legalName: string | null;
11}
12
13export function SiteHeader({ user }: { user: SiteHeaderUser | null }) {
14 return (
15 <header className="relative z-50 mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-6">
16 <Link href="/" className="flex items-center gap-2" aria-label="briven home">
17 <Image src="/icon.svg" alt="" width={40} height={40} priority className="opacity-95" />
18 <span className="font-mono tracking-tight text-[var(--color-text)] text-[var(--text-small)]">
19 briven
20 </span>
21 <span className="hidden font-mono text-[var(--color-text-subtle)] text-[var(--text-xs)] sm:inline">
22 · tech
23 </span>
24 <span
25 aria-label="beta v1"
26 title="briven is in public beta — production-ready, on track for GA later this year"
27 className="ml-1 inline-flex items-center rounded-[var(--radius-full)] border border-[var(--color-border-primary)] bg-[var(--color-primary-subtle)] px-1.5 py-0.5 font-mono uppercase tracking-wider text-[var(--color-primary)] text-[10px]"
28 >
29 beta v1
30 </span>
31 </Link>
32
33 <nav className="flex items-center gap-6 font-mono text-[var(--text-small)]">
34 <Link
35 href="/pricing"
36 className="text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
37 >
38 pricing
39 </Link>
40 <Link
41 href="/compare"
42 className="hidden text-[var(--color-text-muted)] hover:text-[var(--color-text)] sm:inline"
43 >
44 compare
45 </Link>
46 <Link
47 href="/migrate"
48 className="hidden text-[var(--color-text-muted)] hover:text-[var(--color-text)] sm:inline"
49 >
50 migrate
51 </Link>
52 <Link
53 href="https://docs.briven.tech"
54 className="text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
55 >
56 docs
57 </Link>
58 {user ? (
59 <LandingUserMenu user={user} />
60 ) : (
61 <Link
62 href="/signin"
63 className="text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
64 >
65 sign in
66 </Link>
67 )}
68 </nav>
69 </header>
70 );
71}