wip

apps/website/components/leagues/ScoringOverviewCard.tsx

@@ -0,0 +1,54 @@
+import Card from '@/components/ui/Card';
+
+interface ScoringOverviewCardProps {
+  gameName: string;
+  scoringPresetName?: string;
+  dropPolicySummary: string;
+  totalChampionships: number;
+}
+
+export function ScoringOverviewCard({ 
+  gameName,
+  scoringPresetName,
+  dropPolicySummary,
+  totalChampionships
+}: ScoringOverviewCardProps) {
+  return (
+    <Card>
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-semibold text-white">Scoring System</h2>
+          <p className="text-sm text-gray-400 mt-1">Points allocation and championship rules</p>
+        </div>
+        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary-blue/10 border border-primary-blue/20">
+          <span className="text-sm font-medium text-primary-blue">{scoringPresetName || 'Custom'}</span>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+        <div className="bg-deep-graphite rounded-lg p-4 border border-charcoal-outline">
+          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1 font-medium">Platform</p>
+          <p className="text-lg font-semibold text-white">{gameName}</p>
+        </div>
+        
+        <div className="bg-deep-graphite rounded-lg p-4 border border-charcoal-outline">
+          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1 font-medium">Championships</p>
+          <p className="text-lg font-semibold text-white">{totalChampionships}</p>
+        </div>
+        
+        <div className="bg-deep-graphite rounded-lg p-4 border border-charcoal-outline">
+          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1 font-medium">Drop Policy</p>
+          <p className="text-lg font-semibold text-white truncate" title={dropPolicySummary}>
+            {dropPolicySummary.includes('Best') ? dropPolicySummary.split(' ').slice(0, 3).join(' ') : 
+             dropPolicySummary.includes('Worst') ? dropPolicySummary.split(' ').slice(0, 3).join(' ') : 
+             'All count'}
+          </p>
+        </div>
+      </div>
+
+      <div className="p-4 bg-deep-graphite rounded-lg border border-charcoal-outline">
+        <p className="text-sm text-gray-400">{dropPolicySummary}</p>
+      </div>
+    </Card>
+  );
+}