73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
import type { ComponentProps } from 'react';
|
|
import { Kanit } from 'next/font/google';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { Coffee, Server, Wrench } from 'lucide-react';
|
|
|
|
import { Controls } from './controls';
|
|
|
|
const kanitSans = Kanit({
|
|
subsets: ['latin'],
|
|
weight: ['400', '500', '600', '700'],
|
|
});
|
|
|
|
export default function Header(headerProps: ComponentProps<'header'>) {
|
|
return (
|
|
<header
|
|
className='border-border/40 bg-background/95 supports-backdrop-filter:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur'
|
|
{...headerProps}
|
|
>
|
|
<div className='container mx-auto flex h-16 items-center justify-between px-4 md:px-6'>
|
|
{/* Logo */}
|
|
<Link
|
|
href='/'
|
|
className='to-accent-foreground flex items-center gap-2 bg-linear-to-r from-[#281A65] via-[#363354] bg-clip-text text-transparent transition-opacity hover:opacity-80 dark:from-[#bec8e6] dark:via-[#F0EEE4] dark:to-[#FFF8E7]'
|
|
>
|
|
<Image
|
|
src='/misc/convex/convex-symbol-white.svg'
|
|
alt='Convex Monorepo'
|
|
width={50}
|
|
height={50}
|
|
className='w-15 invert dark:invert-0'
|
|
/>
|
|
<span
|
|
className={`mb-3 hidden font-extrabold lg:inline lg:text-5xl ${kanitSans.className}`}
|
|
>
|
|
convex monorepo
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Navigation */}
|
|
<nav className='hidden items-center gap-6 text-base font-medium md:flex'>
|
|
<Link
|
|
href='/#features'
|
|
className='text-foreground/60 hover:text-foreground flex items-center gap-2 transition-colors'
|
|
>
|
|
<Wrench width={18} height={18} />
|
|
Features
|
|
</Link>
|
|
<Link
|
|
href='/#tech-stack'
|
|
className='text-foreground/60 hover:text-foreground flex items-center gap-2 transition-colors'
|
|
>
|
|
<Server width={18} height={18} />
|
|
Stack
|
|
</Link>
|
|
<Link
|
|
href='https://git.gbrown.org/gib/convex-monorepo'
|
|
target='_blank'
|
|
rel='noopener noreferrer'
|
|
className='text-foreground/60 hover:text-foreground flex items-center gap-2 transition-colors'
|
|
>
|
|
<Coffee width={20} height={20} />
|
|
Repository
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* Controls (Theme + Auth) */}
|
|
<Controls />
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|