website refactor

apps/website/templates/RulebookTemplate.tsx

@@ -0,0 +1,102 @@
+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>
+  );
+}