85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
'use client'
|
||
|
||
import Link from 'next/link'
|
||
import { usePathname } from 'next/navigation'
|
||
import { useAuth } from '@/contexts/AuthContext'
|
||
|
||
interface NavigationProps {
|
||
showExitLearning?: boolean
|
||
onExitLearning?: () => void
|
||
}
|
||
|
||
export function Navigation({ showExitLearning = false, onExitLearning }: NavigationProps = {}) {
|
||
const { user, logout } = useAuth()
|
||
const pathname = usePathname()
|
||
|
||
const navItems = [
|
||
{ href: '/dashboard', label: '儀表板' },
|
||
{ href: '/flashcards', label: '詞卡' },
|
||
{ href: '/learn', label: '學習' }
|
||
]
|
||
|
||
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">
|
||
{/* 學習模式的結束學習按鈕 */}
|
||
{showExitLearning ? (
|
||
<button
|
||
onClick={onExitLearning}
|
||
className="text-gray-600 hover:text-gray-900"
|
||
>
|
||
× 結束學習
|
||
</button>
|
||
) : (
|
||
<>
|
||
{/* 通知按鈕 */}
|
||
<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>
|
||
)
|
||
} |