zetaloop
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { cn } from "@/lib/utils"
|
|
import { Bell, CreditCard, Settings, ShieldCheck } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
|
|
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 border-border/60">
|
|
<div className="flex h-14 items-center border-b border-border/60 px-6 font-semibold">
|
|
账号设置
|
|
</div>
|
|
<nav className="p-3 space-y-1">
|
|
{links.map((link) => {
|
|
const Icon = link.icon
|
|
const isActive = pathname === link.href
|
|
return (
|
|
<Button
|
|
key={link.href}
|
|
variant="ghost"
|
|
className={cn(
|
|
"w-full justify-start rounded-md border-l-2 transition-colors h-10",
|
|
isActive
|
|
? "border-primary bg-primary/5 text-foreground font-medium"
|
|
: "border-transparent text-muted-foreground hover:bg-accent/50 hover:text-foreground",
|
|
)}
|
|
asChild
|
|
>
|
|
<Link href={link.href}>
|
|
<Icon className="mr-2 h-4 w-4" />
|
|
{link.label}
|
|
</Link>
|
|
</Button>
|
|
)
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
)
|
|
}
|