website refactor

apps/website/components/leagues/RulebookTabs.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Surface } from '@/ui/Surface';
+
+export type RulebookSection = 'scoring' | 'conduct' | 'protests' | 'penalties';
+
+interface RulebookTabsProps {
+  activeSection: RulebookSection;
+  onSectionChange: (section: RulebookSection) => void;
+}
+
+export function RulebookTabs({ activeSection, onSectionChange }: RulebookTabsProps) {
+  const sections: { id: RulebookSection; label: string }[] = [
+    { id: 'scoring', label: 'Scoring' },
+    { id: 'conduct', label: 'Conduct' },
+    { id: 'protests', label: 'Protests' },
+    { id: 'penalties', label: 'Penalties' },
+  ];
+
+  return (
+    <Surface variant="muted" rounded="lg" padding={1} style={{ backgroundColor: '#0f1115', border: '1px solid #262626' }}>
+      <Box style={{ display: 'flex', gap: '0.25rem' }}>
+        {sections.map((section) => (
+          <Button
+            key={section.id}
+            variant={activeSection === section.id ? 'secondary' : 'ghost'}
+            onClick={() => onSectionChange(section.id)}
+            fullWidth
+            size="sm"
+          >
+            {section.label}
+          </Button>
+        ))}
+      </Box>
+    </Surface>
+  );
+}