NEW_GIL_HOME\hyeon
3c5eb87784
Set up Next.js v15 starter kit with App Router architecture including: - TailwindCSS v4 with CSS-based config and OKLCH color system - shadcn/ui components (New York style) with Lucide icons - next-themes for light/dark/system theme toggle (Korean labels) - Layout components: navbar, footer, theme-toggle - Import aliases and TypeScript configuration Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import Link from "next/link"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { ThemeToggle } from "./theme-toggle"
|
|
|
|
export function Navbar() {
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="container mx-auto flex h-14 max-w-screen-2xl items-center px-4">
|
|
<div className="mr-4 hidden md:flex">
|
|
<Link href="/" className="mr-6 flex items-center space-x-2">
|
|
<span className="hidden font-bold sm:inline-block">
|
|
Next.js Starter Kit
|
|
</span>
|
|
</Link>
|
|
<nav className="flex items-center gap-4 text-sm lg:gap-6">
|
|
<Link
|
|
href="/"
|
|
className="transition-colors hover:text-foreground/80 text-foreground"
|
|
>
|
|
홈
|
|
</Link>
|
|
<Link
|
|
href="/about"
|
|
className="transition-colors hover:text-foreground/80 text-muted-foreground"
|
|
>
|
|
소개
|
|
</Link>
|
|
<Link
|
|
href="/docs"
|
|
className="transition-colors hover:text-foreground/80 text-muted-foreground"
|
|
>
|
|
문서
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
|
|
<div className="w-full flex-1 md:w-auto md:flex-none">
|
|
<Badge variant="secondary" className="mr-2">
|
|
v1.0.0
|
|
</Badge>
|
|
</div>
|
|
<nav className="flex items-center">
|
|
<ThemeToggle />
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
} |