大海
44 lines
2.0 KiB
TypeScript
44 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { Card } from "@/components/ui/Card";
|
|
import { Button } from "@/components/ui/Button";
|
|
|
|
const menuItems = [
|
|
{ icon: "⚙️", label: "设置", href: "#" },
|
|
{ icon: "🔔", label: "通知", href: "#" },
|
|
{ icon: "❓", label: "帮助与反馈", href: "#" },
|
|
{ icon: "📄", label: "关于我们", href: "#" },
|
|
];
|
|
|
|
export default function ProfilePage() {
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* User Info */}
|
|
<div className="bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl p-6 text-white text-center">
|
|
<div className="w-20 h-20 mx-auto rounded-full bg-white/20 flex items-center justify-center text-3xl backdrop-blur">😊</div>
|
|
<h1 className="text-xl font-bold mt-3">用户昵称</h1>
|
|
<p className="text-sm text-blue-100">138****1234</p>
|
|
<Button variant="ghost" className="mt-3 bg-white/10 text-white hover:bg-white/20" size="sm">编辑资料</Button>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<Card className="text-center"><p className="text-xl font-bold text-gray-800">0</p><p className="text-xs text-gray-500">收藏</p></Card>
|
|
<Card className="text-center"><p className="text-xl font-bold text-gray-800">0</p><p className="text-xs text-gray-500">订单</p></Card>
|
|
<Card className="text-center"><p className="text-xl font-bold text-gray-800">0</p><p className="text-xs text-gray-500">足迹</p></Card>
|
|
</div>
|
|
|
|
{/* Menu */}
|
|
<Card className="divide-y divide-gray-50 p-0">
|
|
{menuItems.map((item, i) => (
|
|
<a key={i} href={item.href} className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors">
|
|
<span className="text-lg">{item.icon}</span>
|
|
<span className="flex-1 text-sm text-gray-700">{item.label}</span>
|
|
<svg className="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
|
|
</a>
|
|
))}
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|