website refactor

This commit is contained in:
2026-01-19 18:34:01 +01:00
parent 61b5cf3b64
commit 41e21e6595
24 changed files with 643 additions and 717 deletions

View File

@@ -7,13 +7,11 @@ import { StewardingQueuePanel } from '@/components/leagues/StewardingQueuePanel'
import { StewardingStats } from '@/components/leagues/StewardingStats';
import { PenaltyFAB } from '@/components/races/PenaltyFAB';
import type { StewardingViewData } from '@/lib/view-data/leagues/StewardingViewData';
import {
SharedBox,
SharedButton,
SharedStack,
SharedText,
SharedCard
} from '@/components/shared/UIComponents';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Card } from '@/ui/Card';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
interface StewardingTemplateProps extends TemplateProps<StewardingViewData> {
@@ -51,7 +49,7 @@ export function StewardingTemplate({
currentDriverId,
}: StewardingTemplateProps) {
return (
<SharedStack gap={6}>
<Stack gap={6}>
<StewardingStats
totalPending={viewData.totalPending}
totalResolved={viewData.totalResolved}
@@ -59,41 +57,41 @@ export function StewardingTemplate({
/>
{/* Tab navigation */}
<SharedBox borderBottom borderColor="border-charcoal-outline">
<SharedStack direction="row" gap={4}>
<SharedBox
<Box borderBottom borderColor="border-charcoal-outline">
<Stack direction="row" gap={4}>
<Box
borderBottom={activeTab === 'pending'}
borderColor={activeTab === 'pending' ? 'border-primary-blue' : undefined}
>
<SharedButton
<Button
variant="ghost"
onClick={() => onTabChange('pending')}
rounded={false}
>
<SharedStack direction="row" align="center" gap={2}>
<SharedText weight="medium" color={activeTab === 'pending' ? 'text-primary-blue' : undefined}>Pending Protests</SharedText>
<Stack direction="row" align="center" gap={2}>
<Text weight="medium" color={activeTab === 'pending' ? 'text-primary-blue' : undefined}>Pending Protests</Text>
{viewData.totalPending > 0 && (
<SharedBox px={2} py={0.5} fontSize="0.75rem" bg="bg-warning-amber/20" color="text-warning-amber" rounded="full">
<Box px={2} py={0.5} fontSize="0.75rem" bg="bg-warning-amber/20" color="text-warning-amber" rounded="full">
{viewData.totalPending}
</SharedBox>
</Box>
)}
</SharedStack>
</SharedButton>
</SharedBox>
<SharedBox
</Stack>
</Button>
</Box>
<Box
borderBottom={activeTab === 'history'}
borderColor={activeTab === 'history' ? 'border-primary-blue' : undefined}
>
<SharedButton
<Button
variant="ghost"
onClick={() => onTabChange('history')}
rounded={false}
>
<SharedText weight="medium" color={activeTab === 'history' ? 'text-primary-blue' : undefined}>History</SharedText>
</SharedButton>
</SharedBox>
</SharedStack>
</SharedBox>
<Text weight="medium" color={activeTab === 'history' ? 'text-primary-blue' : undefined}>History</Text>
</Button>
</Box>
</Stack>
</Box>
{/* Content */}
{activeTab === 'pending' ? (
@@ -102,15 +100,15 @@ export function StewardingTemplate({
onReview={onReviewProtest}
/>
) : (
<SharedCard>
<SharedBox p={6}>
<Card>
<Box p={6}>
<PenaltyHistoryList
protests={allResolvedProtests}
races={racesMap}
drivers={driverMap}
/>
</SharedBox>
</SharedCard>
</Box>
</Card>
)}
{activeTab === 'history' && (
@@ -141,6 +139,6 @@ export function StewardingTemplate({
races={viewData.races.map(r => ({ id: r.id, track: r.track, scheduledAt: new Date(r.scheduledAt) }))}
/>
)}
</SharedStack>
</Stack>
);
}