236 lines
9.5 KiB
TypeScript
236 lines
9.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Card } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Progress } from "@/components/ui/progress"
|
|
import { User, Award, BookOpen, Trophy, Star } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
export default function ProfilePage() {
|
|
const [activeTab, setActiveTab] = useState("profile")
|
|
|
|
// Mock user data
|
|
const userData = {
|
|
name: "Alex Johnson",
|
|
level: 5,
|
|
xp: 2450,
|
|
maxXp: 3000,
|
|
rank: "Advanced",
|
|
achievements: 8,
|
|
coursesCompleted: 12,
|
|
totalStudyTime: "124h"
|
|
}
|
|
|
|
const stats = [
|
|
{ label: "Level", value: userData.level, icon: Star },
|
|
{ label: "XP", value: `${userData.xp}/${userData.maxXp}`, icon: Trophy },
|
|
{ label: "Rank", value: userData.rank, icon: Award }
|
|
]
|
|
|
|
const achievements = [
|
|
{ title: "First Steps", description: "Complete your first course", unlocked: true },
|
|
{ title: "Quick Learner", description: "Complete a course in under 24h", unlocked: true },
|
|
{ title: "Dedication", description: "Study 7 days in a row", unlocked: true },
|
|
{ title: "Master", description: "Complete 10 courses", unlocked: true },
|
|
{ title: "Expert", description: "Reach level 5", unlocked: true },
|
|
{ title: "Marathon", description: "Study for 100 hours", unlocked: true },
|
|
{ title: "Perfectionist", description: "Score 100% on 5 tests", unlocked: false },
|
|
{ title: "Legend", description: "Reach level 10", unlocked: false }
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0a0e1a]">
|
|
{/* Header */}
|
|
<header className="bg-[#0d1117] border-b border-cyan-500/30 sticky top-0 z-50">
|
|
<nav className="container mx-auto px-6 py-4">
|
|
<div className="flex items-center justify-center">
|
|
<div className="flex items-center gap-12">
|
|
<Link href="/home/main">
|
|
<button
|
|
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80"
|
|
>
|
|
Main
|
|
</button>
|
|
</Link>
|
|
<Link href="/home/progress">
|
|
<button
|
|
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80"
|
|
>
|
|
Progress
|
|
</button>
|
|
</Link>
|
|
<button
|
|
onClick={() => setActiveTab("profile")}
|
|
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400"
|
|
>
|
|
Profile
|
|
</button>
|
|
<Link href="/home/rules">
|
|
<button
|
|
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80"
|
|
>
|
|
Rules
|
|
</button>
|
|
</Link>
|
|
<Link href="/login">
|
|
<button
|
|
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80"
|
|
>
|
|
Login
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<main className="container mx-auto px-6 py-8 max-w-6xl">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* User Profile Card */}
|
|
<Card className="lg:col-span-1 bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
|
<div className="text-center">
|
|
{/* Avatar */}
|
|
<div className="w-32 h-32 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-4 border-4 border-cyan-500/30">
|
|
<User className="w-16 h-16 text-cyan-400" />
|
|
</div>
|
|
|
|
{/* User Info */}
|
|
<h2 className="text-2xl font-bold text-cyan-400 font-mono mb-1">
|
|
{userData.name}
|
|
</h2>
|
|
<p className="text-cyan-400/60 font-mono text-sm mb-6">
|
|
{userData.rank} • Level {userData.level}
|
|
</p>
|
|
|
|
{/* XP Progress */}
|
|
<div className="mb-6">
|
|
<div className="flex justify-between items-center mb-2">
|
|
<span className="text-xs font-mono text-cyan-400/60">XP Progress</span>
|
|
<span className="text-xs font-mono text-cyan-400">
|
|
{userData.xp}/{userData.maxXp}
|
|
</span>
|
|
</div>
|
|
<Progress
|
|
value={(userData.xp / userData.maxXp) * 100}
|
|
className="h-3 bg-[#0a0e1a]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Quick Stats */}
|
|
<div className="grid grid-cols-2 gap-4 mb-6">
|
|
<div className="bg-[#0a0e1a] border border-cyan-500/20 rounded-lg p-3">
|
|
<BookOpen className="w-5 h-5 text-cyan-400 mx-auto mb-1" />
|
|
<div className="text-xl font-bold text-cyan-400 font-mono">
|
|
{userData.coursesCompleted}
|
|
</div>
|
|
<div className="text-xs text-cyan-400/60 font-mono">Courses</div>
|
|
</div>
|
|
<div className="bg-[#0a0e1a] border border-cyan-500/20 rounded-lg p-3">
|
|
<Award className="w-5 h-5 text-cyan-400 mx-auto mb-1" />
|
|
<div className="text-xl font-bold text-cyan-400 font-mono">
|
|
{userData.achievements}
|
|
</div>
|
|
<div className="text-xs text-cyan-400/60 font-mono">Badges</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
className="w-full bg-cyan-500 hover:bg-cyan-400 text-black font-mono font-bold"
|
|
>
|
|
EDIT PROFILE
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Stats and Achievements */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Personal Progress Card */}
|
|
<Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
|
<h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
|
|
Personal progress
|
|
</h3>
|
|
<div className="grid grid-cols-3 gap-4">
|
|
{stats.map((stat, index) => {
|
|
const Icon = stat.icon
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="bg-[#0a0e1a] border border-cyan-500/20 rounded-lg p-4 text-center"
|
|
>
|
|
<Icon className="w-6 h-6 text-cyan-400 mx-auto mb-2" />
|
|
<div className="text-2xl font-bold text-cyan-400 font-mono mb-1">
|
|
{stat.value}
|
|
</div>
|
|
<div className="text-xs text-cyan-400/60 font-mono">
|
|
{stat.label}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Achievements Card */}
|
|
<Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
|
<h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
|
|
Achievements
|
|
</h3>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{achievements.map((achievement, index) => (
|
|
<Card
|
|
key={index}
|
|
className={`p-4 transition-all ${
|
|
achievement.unlocked
|
|
? 'bg-cyan-500/10 border-cyan-500/40 hover:border-cyan-500/60'
|
|
: 'bg-[#0a0e1a] border-cyan-500/10 opacity-40'
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
|
achievement.unlocked
|
|
? 'bg-cyan-500/20'
|
|
: 'bg-cyan-500/5'
|
|
}`}>
|
|
<Trophy className={`w-5 h-5 ${
|
|
achievement.unlocked
|
|
? 'text-cyan-400'
|
|
: 'text-cyan-400/30'
|
|
}`} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h4 className={`font-bold font-mono text-sm mb-1 ${
|
|
achievement.unlocked
|
|
? 'text-cyan-400'
|
|
: 'text-cyan-400/30'
|
|
}`}>
|
|
{achievement.title}
|
|
</h4>
|
|
<p className="text-xs text-cyan-400/50 font-mono line-clamp-2">
|
|
{achievement.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Background grid */}
|
|
<div
|
|
className="fixed inset-0 pointer-events-none -z-10"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: '50px 50px'
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
} |