Redesign p1

frontend/src/pages/MarathonsPage.tsx

@@ -2,9 +2,10 @@ import { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { marathonsApi } from '@/api'
 import type { MarathonListItem } from '@/types'
-import { Button, Card, CardContent } from '@/components/ui'
-import { Plus, Users, Calendar, Loader2 } from 'lucide-react'
+import { NeonButton, GlassCard, StatsCard } from '@/components/ui'
+import { Plus, Users, Calendar, Loader2, Trophy, Gamepad2, ChevronRight, Hash, Sparkles } from 'lucide-react'
 import { format } from 'date-fns'
+import { ru } from 'date-fns/locale'
 
 export function MarathonsPage() {
   const [marathons, setMarathons] = useState<MarathonListItem[]>([])
@@ -12,6 +13,7 @@ export function MarathonsPage() {
   const [joinCode, setJoinCode] = useState('')
   const [joinError, setJoinError] = useState<string | null>(null)
   const [isJoining, setIsJoining] = useState(false)
+  const [showJoinSection, setShowJoinSection] = useState(false)
 
   useEffect(() => {
     loadMarathons()
@@ -36,6 +38,7 @@ export function MarathonsPage() {
     try {
       await marathonsApi.join(joinCode.trim())
       setJoinCode('')
+      setShowJoinSection(false)
       await loadMarathons()
     } catch (err: unknown) {
       const error = err as { response?: { data?: { detail?: string } } }
@@ -45,112 +48,217 @@ export function MarathonsPage() {
     }
   }
 
-  const getStatusColor = (status: string) => {
+  const getStatusConfig = (status: string) => {
     switch (status) {
       case 'preparing':
-        return 'bg-yellow-500/20 text-yellow-500'
+        return {
+          color: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
+          text: 'Подготовка',
+          dot: 'bg-yellow-500',
+        }
       case 'active':
-        return 'bg-green-500/20 text-green-500'
+        return {
+          color: 'bg-neon-500/20 text-neon-400 border-neon-500/30',
+          text: 'Активен',
+          dot: 'bg-neon-500 animate-pulse',
+        }
       case 'finished':
-        return 'bg-gray-500/20 text-gray-400'
+        return {
+          color: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+          text: 'Завершён',
+          dot: 'bg-gray-500',
+        }
       default:
-        return 'bg-gray-500/20 text-gray-400'
+        return {
+          color: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+          text: status,
+          dot: 'bg-gray-500',
+        }
     }
   }
 
-  const getStatusText = (status: string) => {
-    switch (status) {
-      case 'preparing':
-        return 'Подготовка'
-      case 'active':
-        return 'Активен'
-      case 'finished':
-        return 'Завершён'
-      default:
-        return status
-    }
-  }
+  // Stats
+  const activeCount = marathons.filter(m => m.status === 'active').length
+  const completedCount = marathons.filter(m => m.status === 'finished').length
+  const totalParticipants = marathons.reduce((acc, m) => acc + m.participants_count, 0)
 
   if (isLoading) {
     return (
-      <div className="flex justify-center py-12">
-        <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
+      <div className="flex flex-col items-center justify-center py-24">
+        <Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
+        <p className="text-gray-400">Загрузка марафонов...</p>
       </div>
     )
   }
 
   return (
-    <div className="max-w-4xl mx-auto">
-      <div className="flex justify-between items-center mb-8">
-        <h1 className="text-2xl font-bold text-white">Мои марафоны</h1>
-        <Link to="/marathons/create">
-          <Button>
-            <Plus className="w-4 h-4 mr-2" />
-            Создать марафон
-          </Button>
-        </Link>
+    <div className="max-w-5xl mx-auto">
+      {/* Header */}
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-white mb-2">Мои марафоны</h1>
+          <p className="text-gray-400">Управляйте своими игровыми соревнованиями</p>
+        </div>
+        <div className="flex gap-3">
+          <NeonButton
+            variant="outline"
+            onClick={() => setShowJoinSection(!showJoinSection)}
+            icon={<Hash className="w-4 h-4" />}
+          >
+            По коду
+          </NeonButton>
+          <Link to="/marathons/create">
+            <NeonButton icon={<Plus className="w-4 h-4" />}>
+              Создать
+            </NeonButton>
+          </Link>
+        </div>
       </div>
 
+      {/* Stats */}
+      {marathons.length > 0 && (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+          <StatsCard
+            label="Всего"
+            value={marathons.length}
+            icon={<Gamepad2 className="w-6 h-6" />}
+            color="default"
+          />
+          <StatsCard
+            label="Активных"
+            value={activeCount}
+            icon={<Sparkles className="w-6 h-6" />}
+            color="neon"
+          />
+          <StatsCard
+            label="Завершено"
+            value={completedCount}
+            icon={<Trophy className="w-6 h-6" />}
+            color="purple"
+          />
+          <StatsCard
+            label="Участников"
+            value={totalParticipants}
+            icon={<Users className="w-6 h-6" />}
+            color="pink"
+          />
+        </div>
+      )}
+
       {/* Join marathon */}
-      <Card className="mb-8">
-        <CardContent>
-          <h3 className="font-medium text-white mb-3">Присоединиться к марафону</h3>
+      {showJoinSection && (
+        <GlassCard className="mb-8 animate-slide-in-down" variant="neon">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
+              <Hash className="w-5 h-5 text-accent-400" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-white">Присоединиться к марафону</h3>
+              <p className="text-sm text-gray-400">Введите код приглашения</p>
+            </div>
+          </div>
           <div className="flex gap-3">
             <input
               type="text"
               value={joinCode}
-              onChange={(e) => setJoinCode(e.target.value)}
-              placeholder="Введите код приглашения"
-              className="input flex-1"
+              onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
+              onKeyDown={(e) => e.key === 'Enter' && handleJoin()}
+              placeholder="XXXXXX"
+              className="input flex-1 font-mono text-center tracking-widest uppercase"
+              maxLength={10}
             />
-            <Button onClick={handleJoin} isLoading={isJoining}>
+            <NeonButton
+              onClick={handleJoin}
+              isLoading={isJoining}
+              color="purple"
+            >
               Присоединиться
-            </Button>
+            </NeonButton>
           </div>
-          {joinError && <p className="mt-2 text-sm text-red-500">{joinError}</p>}
-        </CardContent>
-      </Card>
+          {joinError && (
+            <p className="mt-3 text-sm text-red-400 flex items-center gap-2">
+              <span className="w-1.5 h-1.5 bg-red-500 rounded-full" />
+              {joinError}
+            </p>
+          )}
+        </GlassCard>
+      )}
 
       {/* Marathon list */}
       {marathons.length === 0 ? (
-        <Card>
-          <CardContent className="text-center py-8">
-            <p className="text-gray-400 mb-4">У вас пока нет марафонов</p>
+        <GlassCard className="text-center py-16">
+          <div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-dark-700 flex items-center justify-center">
+            <Gamepad2 className="w-10 h-10 text-gray-600" />
+          </div>
+          <h3 className="text-xl font-semibold text-white mb-2">Нет марафонов</h3>
+          <p className="text-gray-400 mb-6 max-w-sm mx-auto">
+            Создайте свой первый марафон или присоединитесь к существующему по коду
+          </p>
+          <div className="flex gap-3 justify-center">
+            <NeonButton
+              variant="outline"
+              onClick={() => setShowJoinSection(true)}
+              icon={<Hash className="w-4 h-4" />}
+            >
+              Ввести код
+            </NeonButton>
             <Link to="/marathons/create">
-              <Button>Создать первый марафон</Button>
+              <NeonButton icon={<Plus className="w-4 h-4" />}>
+                Создать марафон
+              </NeonButton>
             </Link>
-          </CardContent>
-        </Card>
+          </div>
+        </GlassCard>
       ) : (
         <div className="space-y-4">
-          {marathons.map((marathon) => (
-            <Link key={marathon.id} to={`/marathons/${marathon.id}`}>
-              <Card className="hover:bg-gray-700/50 transition-colors cursor-pointer">
-                <CardContent className="flex items-center justify-between">
-                  <div>
-                    <h3 className="text-lg font-medium text-white mb-1">
-                      {marathon.title}
-                    </h3>
-                    <div className="flex items-center gap-4 text-sm text-gray-400">
-                      <span className="flex items-center gap-1">
-                        <Users className="w-4 h-4" />
-                        {marathon.participants_count} участников
+          {marathons.map((marathon, index) => {
+            const status = getStatusConfig(marathon.status)
+            return (
+              <Link key={marathon.id} to={`/marathons/${marathon.id}`}>
+                <div
+                  className="group glass rounded-xl p-5 border border-dark-600 transition-all duration-300 hover:border-neon-500/30 hover:-translate-y-0.5 hover:shadow-[0_10px_40px_rgba(0,240,255,0.1)]"
+                  style={{ animationDelay: `${index * 50}ms` }}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                      {/* Icon */}
+                      <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 flex items-center justify-center border border-neon-500/20 group-hover:border-neon-500/40 transition-colors">
+                        <Gamepad2 className="w-7 h-7 text-neon-400" />
+                      </div>
+
+                      {/* Info */}
+                      <div>
+                        <h3 className="text-lg font-semibold text-white group-hover:text-neon-400 transition-colors mb-1">
+                          {marathon.title}
+                        </h3>
+                        <div className="flex flex-wrap items-center gap-4 text-sm text-gray-400">
+                          <span className="flex items-center gap-1.5">
+                            <Users className="w-4 h-4" />
+                            {marathon.participants_count}
+                          </span>
+                          {marathon.start_date && (
+                            <span className="flex items-center gap-1.5">
+                              <Calendar className="w-4 h-4" />
+                              {format(new Date(marathon.start_date), 'd MMM yyyy', { locale: ru })}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Status & Arrow */}
+                    <div className="flex items-center gap-4">
+                      <span className={`px-3 py-1.5 rounded-full text-sm font-medium border flex items-center gap-2 ${status.color}`}>
+                        <span className={`w-2 h-2 rounded-full ${status.dot}`} />
+                        {status.text}
                       </span>
-                      {marathon.start_date && (
-                        <span className="flex items-center gap-1">
-                          <Calendar className="w-4 h-4" />
-                          {format(new Date(marathon.start_date), 'MMM d, yyyy')}
-                        </span>
-                      )}
+                      <ChevronRight className="w-5 h-5 text-gray-600 group-hover:text-neon-400 transition-colors" />
                     </div>
                   </div>
-                  <span className={`px-3 py-1 rounded-full text-sm ${getStatusColor(marathon.status)}`}>
-                    {getStatusText(marathon.status)}
-                  </span>
-                </CardContent>
-              </Card>
-            </Link>
-          ))}
+                </div>
+              </Link>
+            )
+          })}
         </div>
       )}
     </div>