Add block main page, progress, profile
This commit is contained in:
Daniil
@@ -2,239 +2,286 @@
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Building2, Trophy, User, Search } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { CheckCircle2, Circle, Clock } from "lucide-react"
|
||||
|
||||
export default function ProgressPage() {
|
||||
const [activeTab, setActiveTab] = useState("progress")
|
||||
export default function RulesPage() {
|
||||
const [activeTab, setActiveTab] = useState("rules")
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
|
||||
// Mock data
|
||||
const courses = [
|
||||
{ id: 1, name: "React", lessons: 12, completed: 8 },
|
||||
{ id: 2, name: "TypeScript", lessons: 10, completed: 6 },
|
||||
{ id: 3, name: "Next.js", lessons: 15, completed: 4 },
|
||||
{ id: 4, name: "Node.js", lessons: 20, completed: 0 }
|
||||
// Mock data для рейтингов
|
||||
const cityLeaderboard = [
|
||||
{ rank: 1, name: "Moscow", points: 12450 },
|
||||
{ rank: 2, name: "Kazan", points: 8920 },
|
||||
{ rank: 3, name: "SPB", points: 7185 },
|
||||
{ rank: 4, name: "Novosibirsk", points: 5670 },
|
||||
{ rank: 5, name: "Ekaterinburg", points: 4320 }
|
||||
]
|
||||
|
||||
const assignments = [
|
||||
{ id: 1, course: "React", name: "Build a Todo App", grade: 95, status: "completed" },
|
||||
{ id: 2, course: "TypeScript", name: "Type System", grade: 88, status: "completed" },
|
||||
{ id: 3, course: "Next.js", name: "SSR Project", grade: null, status: "pending" },
|
||||
{ id: 4, course: "Node.js", name: "REST API", grade: null, status: "not_started" }
|
||||
const playerLeaderboard = [
|
||||
{ rank: 1, name: "cyber_god", points: 2840 },
|
||||
{ rank: 2, name: "h4ck3r_pro", points: 2650 },
|
||||
{ rank: 3, name: "matrix_neo", points: 2420 },
|
||||
{ rank: 4, name: "data_wizard", points: 2180 },
|
||||
{ rank: 5, name: "code_ninja", points: 1950 }
|
||||
]
|
||||
|
||||
const weekActivity = [
|
||||
{ day: "Mon", hours: 2.5 },
|
||||
{ day: "Tue", hours: 3.2 },
|
||||
{ day: "Wed", hours: 1.8 },
|
||||
{ day: "Thu", hours: 4.1 },
|
||||
{ day: "Fri", hours: 2.9 },
|
||||
{ day: "Sat", hours: 3.5 },
|
||||
{ day: "Sun", hours: 1.2 }
|
||||
const kazanLeaderboard = [
|
||||
{ rank: 1, name: "pennytige", points: 1337 },
|
||||
{ rank: 2, name: "kzn_hacker", points: 1280 },
|
||||
{ rank: 3, name: "tatar_coder", points: 1150 },
|
||||
{ rank: 4, name: "crypto_bear", points: 980 },
|
||||
{ rank: 5, name: "byte_master", points: 875 }
|
||||
]
|
||||
|
||||
const maxHours = Math.max(...weekActivity.map(d => d.hours))
|
||||
const allPlayers = [
|
||||
{ rank: 1, name: "cyber_god", level: 12, points: 2840, city: "Moscow" },
|
||||
{ rank: 2, name: "h4ck3r_pro", level: 11, points: 2650, city: "SPB" },
|
||||
{ rank: 3, name: "matrix_neo", level: 10, points: 2420, city: "Kazan" },
|
||||
{ rank: 15, name: "pennytige", level: 5, points: 1337, city: "Kazan" }
|
||||
]
|
||||
|
||||
const filteredPlayers = allPlayers.filter(player =>
|
||||
player.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)
|
||||
|
||||
const getRankColor = (rank: number) => {
|
||||
if (rank === 1) return "text-yellow-400"
|
||||
if (rank === 2) return "text-gray-300"
|
||||
if (rank === 3) return "text-amber-600"
|
||||
return "text-cyan-400"
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0a0e1a]">
|
||||
<div className="min-h-screen bg-[#0a0e1a] relative overflow-hidden">
|
||||
{/* Animated background effects */}
|
||||
<div className="fixed top-20 left-20 w-96 h-96 bg-cyan-500/5 rounded-full blur-[120px] animate-pulse" />
|
||||
<div className="fixed bottom-20 right-20 w-96 h-96 bg-purple-500/5 rounded-full blur-[120px] animate-pulse" style={{ animationDelay: '1s' }} />
|
||||
|
||||
{/* Header */}
|
||||
<header className="bg-[#0d1117] border-b border-cyan-500/30 sticky top-0 z-50">
|
||||
<header className="bg-[#0d1117]/80 backdrop-blur-xl border-b border-cyan-500/30 sticky top-0 z-50 shadow-lg shadow-cyan-500/5">
|
||||
<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">
|
||||
<Link href="/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 hover:scale-105">
|
||||
Main
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setActiveTab("progress")}
|
||||
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400"
|
||||
>
|
||||
Progress
|
||||
</button>
|
||||
<Link href="/home/profile">
|
||||
<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">
|
||||
<Link href="/main/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 hover:scale-105">
|
||||
Progress
|
||||
</button>
|
||||
</Link>
|
||||
<Link href="/main/profile">
|
||||
<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 hover:scale-105">
|
||||
Profile
|
||||
</button>
|
||||
</Link>
|
||||
<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>
|
||||
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400 scale-110 drop-shadow-[0_0_8px_rgba(6,182,212,0.5)]">
|
||||
Rules
|
||||
</button>
|
||||
<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 hover:scale-105">
|
||||
Logoff
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="container mx-auto px-6 py-8 max-w-7xl">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Left Column - Course Progress */}
|
||||
<div className="space-y-6">
|
||||
{/* My Courses */}
|
||||
<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">
|
||||
My courses
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{courses.map((course) => {
|
||||
const progress = (course.completed / course.lessons) * 100
|
||||
return (
|
||||
<Card
|
||||
key={course.id}
|
||||
className="bg-[#0a0e1a] border border-cyan-500/20 p-4 hover:border-cyan-500/40 transition-all"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h4 className="font-bold text-cyan-400 font-mono text-sm">
|
||||
{course.name}
|
||||
</h4>
|
||||
<span className="text-xs text-cyan-400/60 font-mono">
|
||||
{course.completed}/{course.lessons}
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={progress} className="h-2 bg-[#0d1117]" />
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
<main className="container mx-auto px-6 py-8 max-w-7xl relative z-10">
|
||||
{/* Top Leaderboards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||
{/* Топ городов */}
|
||||
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-6 shadow-[0_0_30px_rgba(6,182,212,0.1)] hover:shadow-[0_0_50px_rgba(6,182,212,0.2)] transition-all duration-300 relative overflow-hidden group">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center">
|
||||
<Building2 className="w-5 h-5 text-cyan-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-cyan-400 font-mono">
|
||||
Топ городов
|
||||
</h3>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* My Grades */}
|
||||
<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">
|
||||
My grades
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{assignments.slice(0, 3).map((assignment) => (
|
||||
<Card
|
||||
key={assignment.id}
|
||||
className="bg-[#0a0e1a] border border-cyan-500/20 p-3"
|
||||
<div className="space-y-2">
|
||||
{cityLeaderboard.map((entry) => (
|
||||
<div
|
||||
key={entry.rank}
|
||||
className="flex items-center justify-between p-3 bg-[#0a0e1a]/80 rounded-lg border border-cyan-500/20 hover:border-cyan-500/40 transition-all group/item"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-bold text-cyan-400 font-mono mb-1">
|
||||
{assignment.course}
|
||||
</div>
|
||||
<div className="text-xs text-cyan-400/60 font-mono">
|
||||
{assignment.name}
|
||||
</div>
|
||||
</div>
|
||||
{assignment.grade ? (
|
||||
<div className="text-xl font-bold text-cyan-400 font-mono">
|
||||
{assignment.grade}%
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-cyan-400/40 font-mono">
|
||||
Pending
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`font-bold font-mono text-sm w-8 ${getRankColor(entry.rank)}`}>
|
||||
#{entry.rank}
|
||||
</span>
|
||||
<span className="text-cyan-400 font-mono text-sm">
|
||||
{entry.name}
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Mathematics (Separate) */}
|
||||
<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">
|
||||
Mathematics
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<Card className="bg-[#0a0e1a] border border-cyan-500/20 p-4">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h4 className="font-bold text-cyan-400 font-mono text-sm">
|
||||
Algebra
|
||||
</h4>
|
||||
<span className="text-xs text-cyan-400/60 font-mono">
|
||||
8/10
|
||||
<span className="text-green-400 font-mono font-bold text-sm">
|
||||
{entry.points.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={80} className="h-2 bg-[#0d1117]" />
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Center Column - Assignments Table */}
|
||||
<Card className="lg:col-span-2 bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
||||
<h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
|
||||
All Assignments
|
||||
</h3>
|
||||
{/* Топ игроков */}
|
||||
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-yellow-500/30 p-6 shadow-[0_0_30px_rgba(234,179,8,0.1)] hover:shadow-[0_0_50px_rgba(234,179,8,0.2)] transition-all duration-300 relative overflow-hidden group">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-yellow-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 bg-yellow-500/20 rounded-lg flex items-center justify-center">
|
||||
<Trophy className="w-5 h-5 text-yellow-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-yellow-400 font-mono">
|
||||
Топ игроков
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{playerLeaderboard.map((entry) => (
|
||||
<div
|
||||
key={entry.rank}
|
||||
className="flex items-center justify-between p-3 bg-[#0a0e1a]/80 rounded-lg border border-yellow-500/20 hover:border-yellow-500/40 transition-all group/item"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`font-bold font-mono text-sm w-8 ${getRankColor(entry.rank)}`}>
|
||||
#{entry.rank}
|
||||
</span>
|
||||
<span className="text-cyan-400 font-mono text-sm">
|
||||
{entry.name}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-green-400 font-mono font-bold text-sm">
|
||||
{entry.points.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Топ Kazan */}
|
||||
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-6 shadow-[0_0_30px_rgba(6,182,212,0.1)] hover:shadow-[0_0_50px_rgba(6,182,212,0.2)] transition-all duration-300 relative overflow-hidden group">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center">
|
||||
<User className="w-5 h-5 text-cyan-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-cyan-400 font-mono">
|
||||
Топ Kazan
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{kazanLeaderboard.map((entry) => (
|
||||
<div
|
||||
key={entry.rank}
|
||||
className="flex items-center justify-between p-3 bg-[#0a0e1a]/80 rounded-lg border border-cyan-500/20 hover:border-cyan-500/40 transition-all group/item"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`font-bold font-mono text-sm w-8 ${getRankColor(entry.rank)}`}>
|
||||
#{entry.rank}
|
||||
</span>
|
||||
<span className="text-cyan-400 font-mono text-sm">
|
||||
{entry.name}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-green-400 font-mono font-bold text-sm">
|
||||
{entry.points.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* All Players Table */}
|
||||
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-6 shadow-[0_0_30px_rgba(6,182,212,0.1)] hover:shadow-[0_0_50px_rgba(6,182,212,0.2)] transition-all duration-300 relative overflow-hidden group">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Trophy className="w-6 h-6 text-cyan-400 animate-pulse" />
|
||||
<h3 className="text-xl font-bold text-cyan-400 font-mono">
|
||||
Все игроки
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="mb-6 relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-cyan-400/50" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Поиск игрока..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-12 bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono hover:border-cyan-500/60 transition-all focus:border-cyan-400 focus:shadow-[0_0_20px_rgba(6,182,212,0.2)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-cyan-500/20">
|
||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
||||
#
|
||||
<tr className="border-b border-cyan-500/30">
|
||||
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase">
|
||||
Ранг
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
||||
Course
|
||||
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase">
|
||||
Игрок
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
||||
Assignment
|
||||
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase">
|
||||
Уровень
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
||||
Grade
|
||||
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase">
|
||||
Очки
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
||||
Status
|
||||
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase">
|
||||
Город
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{assignments.map((assignment, index) => (
|
||||
{filteredPlayers.map((player) => (
|
||||
<tr
|
||||
key={assignment.id}
|
||||
className="border-b border-cyan-500/10 hover:bg-cyan-500/5 transition-colors"
|
||||
key={player.rank}
|
||||
className="border-b border-cyan-500/10 hover:bg-cyan-500/5 transition-all group/row"
|
||||
>
|
||||
<td className="py-3 px-4 text-sm font-mono text-cyan-400">
|
||||
{index + 1}
|
||||
<td className="py-4 px-4">
|
||||
<span className={`font-bold font-mono text-sm ${getRankColor(player.rank)}`}>
|
||||
#{player.rank}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm font-mono text-cyan-400">
|
||||
{assignment.course}
|
||||
<td className="py-4 px-4">
|
||||
<span className="text-cyan-400 font-mono text-sm group-hover/row:text-cyan-300 transition-colors">
|
||||
{player.name}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm font-mono text-cyan-400">
|
||||
{assignment.name}
|
||||
<td className="py-4 px-4">
|
||||
<span className="text-cyan-400 font-mono text-sm">
|
||||
Lvl {player.level}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm font-mono text-cyan-400">
|
||||
{assignment.grade ? `${assignment.grade}%` : '-'}
|
||||
<td className="py-4 px-4">
|
||||
<span className="text-green-400 font-mono font-bold text-sm">
|
||||
{player.points.toLocaleString()}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
{assignment.status === 'completed' ? (
|
||||
<>
|
||||
<CheckCircle2 className="w-4 h-4 text-green-400" />
|
||||
<span className="text-xs font-mono text-green-400">
|
||||
Completed
|
||||
</span>
|
||||
</>
|
||||
) : assignment.status === 'pending' ? (
|
||||
<>
|
||||
<Clock className="w-4 h-4 text-yellow-400" />
|
||||
<span className="text-xs font-mono text-yellow-400">
|
||||
Pending
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Circle className="w-4 h-4 text-cyan-400/30" />
|
||||
<span className="text-xs font-mono text-cyan-400/30">
|
||||
Not Started
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<td className="py-4 px-4">
|
||||
<span className="text-cyan-400/70 font-mono text-sm">
|
||||
{player.city}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
@@ -242,41 +289,24 @@ export default function ProgressPage() {
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Weekly Activity Chart */}
|
||||
<div className="mt-8">
|
||||
<h4 className="text-lg font-bold text-cyan-400 font-mono mb-4">
|
||||
Weekly Activity
|
||||
</h4>
|
||||
<div className="flex items-end justify-between gap-2 h-48">
|
||||
{weekActivity.map((day) => (
|
||||
<div key={day.day} className="flex-1 flex flex-col items-center gap-2">
|
||||
<div className="w-full relative flex-1">
|
||||
<div
|
||||
className="absolute bottom-0 w-full bg-gradient-to-t from-cyan-500 to-cyan-400 rounded-t-lg transition-all hover:from-cyan-400 hover:to-cyan-300"
|
||||
style={{ height: `${(day.hours / maxHours) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-mono text-cyan-400/60">
|
||||
{day.day}
|
||||
</div>
|
||||
<div className="text-xs font-mono text-cyan-400 font-bold">
|
||||
{day.hours}h
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{filteredPlayers.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-cyan-400/50 font-mono">
|
||||
Игрок не найден
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</main>
|
||||
|
||||
{/* Background grid */}
|
||||
{/* Enhanced Background grid */}
|
||||
<div
|
||||
className="fixed inset-0 pointer-events-none -z-10"
|
||||
className="fixed inset-0 pointer-events-none -z-10 opacity-50"
|
||||
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)
|
||||
linear-gradient(rgba(6, 182, 212, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: '50px 50px'
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user