41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
'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>
|
|
);
|
|
}
|