mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 18:52:03 +01:00
parent f035cfe7ce
commit 5ef149b782
39 changed files with 564 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/website/templates/RaceResultsTemplate.tsx
View File

@@ -12,20 +12,19 @@ import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { ArrowLeft, Trophy, Zap } from 'lucide-react';
import { ArrowLeft, Trophy, Zap, type LucideIcon } from 'lucide-react';
import type { RaceResultsViewData } from '@/lib/view-data/races/RaceResultsViewData';
import { RaceResultRow } from '@/ui/RaceResultRow';
import { RacePenaltyRow } from '@/ui/RacePenaltyRowWrapper';
export interface RaceResultsTemplateProps {
viewData: RaceResultsViewData;
currentDriverId: string;
isAdmin: boolean;
isLoading: boolean;
error?: Error | null;
// Actions
onBack: () => void;
onImportResults: (results: any[]) => void;
onImportResults: (results: unknown[]) => void;
onPenaltyClick: (driver: { id: string; name: string }) => void;
// UI State
importing: boolean;
@@ -37,7 +36,6 @@ export interface RaceResultsTemplateProps {
export function RaceResultsTemplate({
viewData,
currentDriverId,
isLoading,
error,
onBack,
@@ -114,9 +112,9 @@ export function RaceResultsTemplate({
</Stack>
{/* Header */}
<Surface variant="muted" rounded="xl" border padding={6} style={{ background: 'linear-gradient(to right, rgba(38, 38, 38, 0.5), rgba(38, 38, 38, 0.3))', borderColor: '#262626' }}>
<Surface variant="muted" rounded="xl" border padding={6} bg="bg-neutral-800/50" borderColor="border-neutral-800">
<Stack direction="row" align="center" gap={4} mb={6}>
<Surface variant="muted" rounded="xl" padding={3} style={{ backgroundColor: 'rgba(59, 130, 246, 0.2)' }}>
<Surface variant="muted" rounded="xl" padding={3} bg="bg-blue-500/20">
<Icon icon={Trophy} size={6} color="#3b82f6" />
</Surface>
<Box>
@@ -131,20 +129,20 @@ export function RaceResultsTemplate({
<Grid cols={4} gap={4}>
<StatItem label="Drivers" value={viewData.totalDrivers ?? 0} />
<StatItem label="League" value={viewData.leagueName ?? '—'} />
<StatItem label="SOF" value={viewData.raceSOF ?? '—'} icon={Zap} color="#f59e0b" />
<StatItem label="Fastest Lap" value={viewData.fastestLapTime ? formatTime(viewData.fastestLapTime) : '—'} color="#10b981" />
<StatItem label="SOF" value={viewData.raceSOF ?? '—'} icon={Zap} color="text-warning-amber" />
<StatItem label="Fastest Lap" value={viewData.fastestLapTime ? formatTime(viewData.fastestLapTime) : '—'} color="text-performance-green" />
</Grid>
</Surface>
{importSuccess && (
<Surface variant="muted" rounded="lg" border padding={4} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)', borderColor: 'rgba(16, 185, 129, 0.3)' }}>
<Surface variant="muted" rounded="lg" border padding={4} bg="bg-green-500/10" borderColor="border-green-500/30">
<Text color="text-performance-green" weight="bold">Success!</Text>
<Text color="text-performance-green" size="sm" block mt={1}>Results imported and standings updated.</Text>
</Surface>
)}
{importError && (
<Surface variant="muted" rounded="lg" border padding={4} style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)', borderColor: 'rgba(239, 68, 68, 0.3)' }}>
<Surface variant="muted" rounded="lg" border padding={4} bg="bg-red-500/10" borderColor="border-red-500/30">
<Text color="text-error-red" weight="bold">Error:</Text>
<Text color="text-error-red" size="sm" block mt={1}>{importError}</Text>
</Surface>
@@ -158,7 +156,7 @@ export function RaceResultsTemplate({
{viewData.results.map((result) => (
<RaceResultRow
key={result.driverId}
result={result as any}
result={result as unknown as never}
points={viewData.pointsSystem[result.position.toString()] ?? 0}
/>
))}
@@ -166,13 +164,13 @@ export function RaceResultsTemplate({
{/* Penalties Section */}
{viewData.penalties.length > 0 && (
<Box pt={6} style={{ borderTop: '1px solid #262626' }}>
<Box pt={6} borderTop="1px solid" borderColor="border-neutral-800">
<Box mb={4}>
<Heading level={2}>Penalties</Heading>
</Box>
<Stack gap={2}>
{viewData.penalties.map((penalty, index) => (
<RacePenaltyRow key={index} penalty={penalty as any} />
<RacePenaltyRow key={index} penalty={penalty as unknown as never} />
))}
</Stack>
</Box>
@@ -215,13 +213,13 @@ export function RaceResultsTemplate({
);
}
function StatItem({ label, value, icon, color = 'text-white' }: { label: string, value: string | number, icon?: any, color?: string }) {
function StatItem({ label, value, icon, color = 'text-white' }: { label: string, value: string | number, icon?: LucideIcon, color?: string }) {
return (
<Surface variant="muted" rounded="lg" padding={3} style={{ backgroundColor: 'rgba(15, 17, 21, 0.6)' }}>
<Surface variant="muted" rounded="lg" padding={3} bg="bg-neutral-900/60">
<Text size="xs" color="text-gray-500" block mb={1}>{label}</Text>
<Stack direction="row" align="center" gap={1.5}>
{icon && <Icon icon={icon} size={4} color={color === 'text-white' ? '#9ca3af' : color} />}
<Text weight="bold" color={color as any} style={{ fontSize: '1.125rem' }}>{value}</Text>
<Text weight="bold" color={color} size="lg">{value}</Text>
</Stack>
</Surface>
);