multica/apps/web/app/header.tsx
Naiyuan Qing 54d84abc8b feat(ui): unify font loading and add design system documentation
Font unification:
- Add @fontsource packages for Geist Sans, Geist Mono, Playfair Display
- Create fonts.ts for centralized font imports
- Import fonts in both web (layout.tsx) and desktop (main.tsx)
- Register --font-brand in Tailwind @theme inline block
- Fix font-brand class usage (replace arbitrary value syntax)

Design system documentation:
- Add comprehensive design philosophy comments to globals.css
- Document typography choices (why Geist, why Playfair for brand)
- Document color system approach (neutral grays, semantic colors only)
- Explain component library customizations

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-11 14:50:19 +08:00

19 lines
552 B
TypeScript

"use client";
import { ThemeToggle } from "./theme-toggle";
export function Header() {
return (
<header className="container flex justify-between items-center p-2">
<div className="flex items-center gap-2.5">
<img src="/logo.svg" alt="Multica" className="size-6 rounded-md" />
<span className="text-sm tracking-wide font-brand">
Multica
</span>
</div>
<div className="flex items-center gap-1">
<ThemeToggle />
</div>
</header>
);
}