102 lines
4.3 KiB
TypeScript
102 lines
4.3 KiB
TypeScript
import { RulebookViewData } from '@/lib/view-data/leagues/RulebookViewData';
|
|
import { Card } from '@/ui/Card';
|
|
import { Section } from '@/ui/Section';
|
|
|
|
interface RulebookTemplateProps {
|
|
viewData: RulebookViewData;
|
|
}
|
|
|
|
export function RulebookTemplate({ viewData }: RulebookTemplateProps) {
|
|
return (
|
|
<Section>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">Rulebook</h1>
|
|
<p className="text-sm text-gray-400 mt-1">Official rules and regulations</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">{viewData.scoringPresetName || 'Custom Rules'}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Stats */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
|
|
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Platform</p>
|
|
<p className="text-lg font-semibold text-white">{viewData.gameName}</p>
|
|
</div>
|
|
<div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
|
|
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Championships</p>
|
|
<p className="text-lg font-semibold text-white">{viewData.championshipsCount}</p>
|
|
</div>
|
|
<div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
|
|
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Sessions Scored</p>
|
|
<p className="text-lg font-semibold text-white capitalize">
|
|
{viewData.sessionTypes}
|
|
</p>
|
|
</div>
|
|
<div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
|
|
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Drop Policy</p>
|
|
<p className="text-lg font-semibold text-white truncate" title={viewData.dropPolicySummary}>
|
|
{viewData.hasActiveDropPolicy ? 'Active' : 'None'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Points Table */}
|
|
<Card>
|
|
<h2 className="text-lg font-semibold text-white mb-4">Points System</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-charcoal-outline">
|
|
<th className="text-left py-2 font-medium text-gray-400">Position</th>
|
|
<th className="text-left py-2 font-medium text-gray-400">Points</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{viewData.positionPoints.map((point) => (
|
|
<tr key={point.position} className="border-b border-charcoal-outline/50">
|
|
<td className="py-3 text-white">{point.position}</td>
|
|
<td className="py-3 text-white">{point.points}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Bonus Points */}
|
|
{viewData.hasBonusPoints && (
|
|
<Card>
|
|
<h2 className="text-lg font-semibold text-white mb-4">Bonus Points</h2>
|
|
<div className="space-y-2">
|
|
{viewData.bonusPoints.map((bonus, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="flex items-center gap-4 p-3 bg-deep-graphite rounded-lg border border-charcoal-outline"
|
|
>
|
|
<div className="w-8 h-8 rounded-full bg-performance-green/10 border border-performance-green/20 flex items-center justify-center shrink-0">
|
|
<span className="text-performance-green text-sm font-bold">+</span>
|
|
</div>
|
|
<p className="text-sm text-gray-300">{bonus}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Drop Policy */}
|
|
{viewData.hasActiveDropPolicy && (
|
|
<Card>
|
|
<h2 className="text-lg font-semibold text-white mb-4">Drop Policy</h2>
|
|
<p className="text-sm text-gray-300">{viewData.dropPolicySummary}</p>
|
|
<p className="text-xs text-gray-500 mt-3">
|
|
Drop rules are applied automatically when calculating championship standings.
|
|
</p>
|
|
</Card>
|
|
)}
|
|
</Section>
|
|
);
|
|
} |