zetaloop
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { Bell, CreditCard, Settings, ShieldCheck } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { Button } from "@/components/ui/button"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const links = [
|
|
{ href: "/settings", label: "个人设置", icon: Settings },
|
|
{ href: "/wallet", label: "钱包", icon: CreditCard },
|
|
{ href: "/notifications", label: "通知中心", icon: Bell },
|
|
{ href: "/verify", label: "身份认证", icon: ShieldCheck },
|
|
]
|
|
|
|
export function AccountSidebar() {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<aside className="w-56 shrink-0 border-r bg-muted/30">
|
|
<div className="flex h-14 items-center border-b px-4 font-semibold">账号设置</div>
|
|
<nav className="p-2 space-y-1">
|
|
{links.map((link) => {
|
|
const Icon = link.icon
|
|
const isActive = pathname === link.href
|
|
return (
|
|
<Button
|
|
key={link.href}
|
|
variant={isActive ? "secondary" : "ghost"}
|
|
className={cn("w-full justify-start", !isActive && "text-muted-foreground")}
|
|
asChild
|
|
>
|
|
<Link href={link.href}>
|
|
<Icon className="h-4 w-4" />
|
|
{link.label}
|
|
</Link>
|
|
</Button>
|
|
)
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
)
|
|
}
|