54 lines
2.2 KiB
TypeScript
54 lines
2.2 KiB
TypeScript
import Card from '@/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>
|
|
);
|
|
} |