wip

2025-12-09 22:22:06 +01:00
parent e34a11ae7c
commit 3adf2e5e94
62 changed files with 6079 additions and 998 deletions
--- a/apps/website/components/leagues/ReadonlyLeagueInfo.tsx
+++ b/apps/website/components/leagues/ReadonlyLeagueInfo.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { Calendar, Users, Trophy, Gamepad2, Eye, Hash, Award } from 'lucide-react';
+import type { LeagueConfigFormModel } from '@gridpilot/racing/application';
+import type { League } from '@gridpilot/racing/domain/entities/League';
+
+interface ReadonlyLeagueInfoProps {
+  league: League;
+  configForm: LeagueConfigFormModel;
+}
+
+export function ReadonlyLeagueInfo({ league, configForm }: ReadonlyLeagueInfoProps) {
+  const basics = configForm.basics;
+  const structure = configForm.structure;
+  const timings = configForm.timings;
+  const scoring = configForm.scoring;
+
+  const infoItems = [
+    {
+      icon: Hash,
+      label: 'League Name',
+      value: basics.name,
+    },
+    {
+      icon: Eye,
+      label: 'Visibility',
+      value: basics.visibility === 'ranked' || basics.visibility === 'public' ? 'Ranked' : 'Unranked',
+    },
+    {
+      icon: Users,
+      label: 'Structure',
+      value: structure.mode === 'solo'
+        ? `Solo • ${structure.maxDrivers} drivers`
+        : `Teams • ${structure.maxTeams} × ${structure.driversPerTeam} drivers`,
+    },
+    {
+      icon: Gamepad2,
+      label: 'Platform',
+      value: 'iRacing',
+    },
+    {
+      icon: Award,
+      label: 'Scoring',
+      value: scoring.patternId ?? 'Standard',
+    },
+    {
+      icon: Calendar,
+      label: 'Created',
+      value: new Date(league.createdAt).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      }),
+    },
+    {
+      icon: Trophy,
+      label: 'Season',
+      value: `${timings.roundsPlanned ?? '—'} rounds`,
+    },
+  ];
+
+  return (
+    <div className="rounded-xl border border-charcoal-outline bg-gradient-to-br from-iron-gray/40 to-iron-gray/20 p-5">
+      <h3 className="text-sm font-semibold text-gray-400 mb-4">League Information</h3>
+      
+      <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+        {infoItems.map((item, index) => {
+          const Icon = item.icon;
+          return (
+            <div key={index} className="flex items-start gap-2.5">
+              <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-iron-gray/60 shrink-0">
+                <Icon className="w-3.5 h-3.5 text-gray-500" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="text-[10px] text-gray-500 mb-0.5">{item.label}</div>
+                <div className="text-xs font-medium text-gray-300 truncate">
+                  {item.value}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}