35 lines
960 B
TypeScript
35 lines
960 B
TypeScript
import { Link } from '@tanstack/react-router'
|
|
import type { Globals, Menu } from '~/lib/types'
|
|
import { ThemeToggle } from './theme-toggle'
|
|
|
|
type Props = {
|
|
globals: Globals
|
|
menu: Menu | undefined
|
|
}
|
|
|
|
export function Header({ globals, menu }: Props) {
|
|
return (
|
|
<header className="bg-muted/50">
|
|
<div className="flex h-16 items-center gap-4 px-4">
|
|
<Link to="/" className="text-base font-semibold hover:no-underline">
|
|
{globals.site_name}
|
|
</Link>
|
|
<nav className="flex gap-1 pl-2">
|
|
{menu?.items.map((item) => (
|
|
<a
|
|
key={item.label}
|
|
href={item.url ?? '#'}
|
|
className="px-2 py-1 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
<div className="ml-auto">
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|