215 lines
11 KiB
TypeScript
215 lines
11 KiB
TypeScript
import {
|
|
ArrowLeft,
|
|
Settings,
|
|
Heart,
|
|
Clock,
|
|
MapPin,
|
|
Home,
|
|
User,
|
|
Crown,
|
|
Star,
|
|
ChevronRight,
|
|
Bell,
|
|
Shield,
|
|
} from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import Link from "next/link"
|
|
|
|
export default function ProfilePage() {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-white">
|
|
{/* Header with glassmorphism */}
|
|
<div className="bg-white/80 backdrop-blur-xl px-4 py-4 sticky top-0 z-10 border-b border-gray-100/50">
|
|
<div className="flex items-center justify-between">
|
|
<Link href="/">
|
|
<div className="w-10 h-10 bg-gray-100/80 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
|
|
<ArrowLeft className="w-5 h-5 text-gray-600" />
|
|
</div>
|
|
</Link>
|
|
<h1 className="text-xl font-bold text-gray-900">我的</h1>
|
|
<div className="w-10 h-10 bg-gray-100/80 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
|
|
<Settings className="w-5 h-5 text-gray-600" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* User Profile Section with premium styling */}
|
|
<div className="bg-gradient-to-br from-white to-gray-50/50 mx-4 mt-6 rounded-3xl p-6 shadow-xl shadow-gray-200/50 border border-gray-100/50">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="relative">
|
|
<div className="w-20 h-20 bg-gradient-to-br from-[#05C7C7] to-[#04B5B5] rounded-3xl flex items-center justify-center shadow-lg shadow-[#05C7C7]/20">
|
|
<User className="w-10 h-10 text-white" />
|
|
</div>
|
|
<div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white flex items-center justify-center">
|
|
<div className="w-2 h-2 bg-white rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex items-center space-x-2 mb-1">
|
|
<h2 className="text-2xl font-bold text-gray-900">用户昵称</h2>
|
|
<div className="bg-gradient-to-r from-yellow-400 to-orange-500 px-2 py-0.5 rounded-lg">
|
|
<Crown className="w-3 h-3 text-white" />
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-gray-500 mb-2">ID: 123456789</p>
|
|
<div className="flex items-center space-x-4 text-xs text-gray-500">
|
|
<div className="flex items-center space-x-1">
|
|
<Star className="w-3 h-3 text-yellow-500" />
|
|
<span>积分: 2,580</span>
|
|
</div>
|
|
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
|
|
<span>等级: LV.8</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Button className="w-full mt-4 bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] hover:from-[#04B5B5] hover:to-[#039999] text-white py-3 rounded-2xl font-semibold shadow-lg shadow-[#05C7C7]/20 transition-all duration-300 hover:scale-[1.02]">
|
|
编辑资料
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="px-4 mt-6 grid grid-cols-3 gap-3">
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-2xl p-4 text-center shadow-lg shadow-gray-200/30 border border-gray-100/50">
|
|
<div className="text-2xl font-bold text-gray-900 mb-1">12</div>
|
|
<div className="text-xs text-gray-500">观看场次</div>
|
|
</div>
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-2xl p-4 text-center shadow-lg shadow-gray-200/30 border border-gray-100/50">
|
|
<div className="text-2xl font-bold text-gray-900 mb-1">5</div>
|
|
<div className="text-xs text-gray-500">收藏场馆</div>
|
|
</div>
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-2xl p-4 text-center shadow-lg shadow-gray-200/30 border border-gray-100/50">
|
|
<div className="text-2xl font-bold text-gray-900 mb-1">28</div>
|
|
<div className="text-xs text-gray-500">观看时长(h)</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Menu Items with premium styling */}
|
|
<div className="mx-4 mt-6 bg-white/80 backdrop-blur-sm rounded-3xl shadow-xl shadow-gray-200/50 border border-gray-100/50 overflow-hidden">
|
|
<Link
|
|
href="/vip"
|
|
className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50"
|
|
>
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-2xl flex items-center justify-center shadow-lg shadow-yellow-400/30">
|
|
<Crown className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-900 font-semibold text-base">VIP会员</span>
|
|
<div className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-medium mt-1 inline-block">
|
|
开通享特权
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ChevronRight className="w-5 h-5 text-gray-400" />
|
|
</Link>
|
|
|
|
<div className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-red-100 to-red-50 rounded-2xl flex items-center justify-center">
|
|
<Heart className="w-6 h-6 text-red-500" />
|
|
</div>
|
|
<span className="text-gray-900 font-medium text-base">我的收藏</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="bg-red-500 text-white text-xs px-2 py-1 rounded-full font-medium">5</div>
|
|
<ChevronRight className="w-5 h-5 text-gray-400" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-50 rounded-2xl flex items-center justify-center">
|
|
<Clock className="w-6 h-6 text-blue-500" />
|
|
</div>
|
|
<span className="text-gray-900 font-medium text-base">观看历史</span>
|
|
</div>
|
|
<ChevronRight className="w-5 h-5 text-gray-400" />
|
|
</div>
|
|
|
|
<div className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-green-100 to-green-50 rounded-2xl flex items-center justify-center">
|
|
<MapPin className="w-6 h-6 text-green-500" />
|
|
</div>
|
|
<span className="text-gray-900 font-medium text-base">常用地址</span>
|
|
</div>
|
|
<ChevronRight className="w-5 h-5 text-gray-400" />
|
|
</div>
|
|
|
|
<div className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-purple-100 to-purple-50 rounded-2xl flex items-center justify-center">
|
|
<Bell className="w-6 h-6 text-purple-500" />
|
|
</div>
|
|
<span className="text-gray-900 font-medium text-base">消息通知</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="bg-red-500 w-2 h-2 rounded-full"></div>
|
|
<ChevronRight className="w-5 h-5 text-gray-400" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-6 py-5 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-gray-100 to-gray-50 rounded-2xl flex items-center justify-center">
|
|
<Shield className="w-6 h-6 text-gray-500" />
|
|
</div>
|
|
<span className="text-gray-900 font-medium text-base">隐私设置</span>
|
|
</div>
|
|
<ChevronRight className="w-5 h-5 text-gray-400" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent Activity with enhanced styling */}
|
|
<div className="mx-4 mt-6 bg-white/80 backdrop-blur-sm rounded-3xl p-6 shadow-xl shadow-gray-200/50 border border-gray-100/50">
|
|
<h3 className="text-lg font-bold text-gray-900 mb-4 flex items-center">
|
|
<div className="w-1 h-6 bg-gradient-to-b from-[#05C7C7] to-[#04B5B5] rounded-full mr-3"></div>
|
|
最近活动
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-4 p-3 bg-gray-50/50 rounded-2xl transition-all duration-300 hover:bg-gray-100/50">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-orange-100 to-orange-50 rounded-2xl overflow-hidden">
|
|
<div className="w-full h-full bg-orange-200"></div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-semibold text-gray-900">观看了 RONIN黄金篮球馆</p>
|
|
<p className="text-xs text-gray-500 mt-1">2小时前 · 观看时长 45分钟</p>
|
|
</div>
|
|
<div className="text-xs text-[#05C7C7] font-medium">+10积分</div>
|
|
</div>
|
|
<div className="flex items-center space-x-4 p-3 bg-gray-50/50 rounded-2xl transition-all duration-300 hover:bg-gray-100/50">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-red-100 to-red-50 rounded-2xl overflow-hidden">
|
|
<div className="w-full h-full bg-red-200"></div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-semibold text-gray-900">收藏了 Panda惊怒熊猫运动俱乐部</p>
|
|
<p className="text-xs text-gray-500 mt-1">1天前</p>
|
|
</div>
|
|
<div className="text-xs text-[#05C7C7] font-medium">+5积分</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Spacing for Fixed Navigation */}
|
|
<div className="h-24"></div>
|
|
|
|
{/* Bottom Navigation with glassmorphism */}
|
|
<div className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-gray-200/50 px-4 py-3">
|
|
<div className="flex justify-around">
|
|
<Link href="/" className="flex flex-col items-center py-2 transition-all duration-300 hover:scale-105">
|
|
<div className="w-8 h-8 bg-gray-100 rounded-xl flex items-center justify-center">
|
|
<Home className="w-4 h-4 text-gray-400" />
|
|
</div>
|
|
<span className="text-xs text-gray-400 mt-1">首页</span>
|
|
</Link>
|
|
<Link href="/profile" className="flex flex-col items-center py-2 transition-all duration-300 hover:scale-105">
|
|
<div className="w-8 h-8 bg-gradient-to-br from-[#05C7C7] to-[#04B5B5] rounded-xl flex items-center justify-center shadow-lg shadow-[#05C7C7]/20">
|
|
<User className="w-4 h-4 text-white" />
|
|
</div>
|
|
<span className="text-xs text-[#05C7C7] font-semibold mt-1">我的</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|