69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { useAuth } from '@/contexts/AuthContext'
|
|
|
|
export function Navigation() {
|
|
const { user, logout } = useAuth()
|
|
const pathname = usePathname()
|
|
|
|
const navItems = [
|
|
{ href: '/dashboard', label: '儀表板' },
|
|
{ href: '/flashcards', label: '詞卡' },
|
|
{ href: '/learn', label: '學習' },
|
|
{ href: '/generate', label: 'AI 生成' },
|
|
]
|
|
|
|
return (
|
|
<nav className="bg-white shadow-sm border-b">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between h-16">
|
|
<div className="flex items-center space-x-8">
|
|
<Link href="/dashboard" className="text-2xl font-bold text-primary">
|
|
DramaLing
|
|
</Link>
|
|
<div className="hidden md:flex space-x-6">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`font-medium transition-colors ${
|
|
pathname === item.href
|
|
? 'text-primary'
|
|
: 'text-gray-600 hover:text-gray-900'
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
{/* 通知按鈕 */}
|
|
<button className="p-2 text-gray-600 hover:text-gray-900">
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* 用戶資訊 */}
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-semibold">
|
|
{user?.username?.[0]?.toUpperCase() || 'U'}
|
|
</div>
|
|
<span className="text-sm font-medium">{user?.displayName || user?.username}</span>
|
|
<button
|
|
onClick={logout}
|
|
className="ml-4 text-sm text-gray-600 hover:text-gray-900"
|
|
>
|
|
登出
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
} |