4854f1cefc
Next.js 14 App Router application for managing homophone pun game levels: - Better Auth with Prisma adapter for authentication - MySQL database with Prisma ORM - Level CRUD operations with drag-and-drop reordering - Tencent COS integration for image uploads - shadcn/ui components with Tailwind CSS - TanStack Query for server state management
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { cn } from '@/lib/utils'
|
|
import { Layers, Home, Settings, LogOut } from 'lucide-react'
|
|
import { signOut, useSession } from '@/lib/auth-client'
|
|
import { useRouter } from 'next/navigation'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
const navigation = [
|
|
{ name: '首页', href: '/levels', icon: Home },
|
|
{ name: '关卡配置', href: '/levels', icon: Layers },
|
|
]
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname()
|
|
const router = useRouter()
|
|
const { data: session } = useSession()
|
|
|
|
const handleSignOut = async () => {
|
|
await signOut()
|
|
router.push('/login')
|
|
router.refresh()
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full w-64 flex-col bg-gray-900 text-white">
|
|
<div className="flex h-16 items-center justify-center border-b border-gray-800">
|
|
<h1 className="text-xl font-bold">Meme Studio</h1>
|
|
</div>
|
|
<nav className="flex-1 space-y-1 p-4">
|
|
{navigation.map((item) => {
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive
|
|
? 'bg-gray-800 text-white'
|
|
: 'text-gray-400 hover:bg-gray-800 hover:text-white'
|
|
)}
|
|
>
|
|
<item.icon className="h-5 w-5" />
|
|
{item.name}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
<div className="border-t border-gray-800 p-4">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="h-8 w-8 rounded-full bg-gray-700 flex items-center justify-center">
|
|
{session?.user?.email?.[0]?.toUpperCase() || 'U'}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">
|
|
{session?.user?.name || session?.user?.email || '用户'}
|
|
</p>
|
|
<p className="text-xs text-gray-400 truncate">
|
|
{session?.user?.email}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full justify-start text-gray-400 hover:text-white hover:bg-gray-800"
|
|
onClick={handleSignOut}
|
|
>
|
|
<LogOut className="h-4 w-4 mr-2" />
|
|
退出登录
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|