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

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 01:26:30 +01:00
parent 4a2d7d15a5
commit c3b308e960
102 changed files with 2532 additions and 4744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/website/templates/DriverProfileTemplate.tsx
View File

@@ -10,20 +10,19 @@ import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { Container } from '@/ui/Container';
import { LoadingSpinner } from '@/ui/LoadingSpinner';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
import { ProfileHero } from '@/components/profile/ProfileHero';
import { ProfileBio } from '@/components/profile/ProfileBio';
import { TeamMembershipGrid } from '@/components/profile/TeamMembershipGrid';
import { PerformanceOverview } from '@/components/profile/PerformanceOverview';
import { ProfileTabs } from '@/components/profile/ProfileTabs';
import { CareerStats } from '@/components/profile/CareerStats';
import { RacingProfile } from '@/components/profile/RacingProfile';
import { AchievementGrid } from '@/components/profile/AchievementGrid';
import { FriendsPreview } from '@/components/profile/FriendsPreview';
import RatingBreakdown from '@/components/drivers/RatingBreakdown';
import { ProfileTabs, type ProfileTab } from '@/components/profile/ProfileTabs';
import type { DriverProfileViewData } from '../../../lib/types/view-data/DriverProfileViewData';
type ProfileTab = 'overview' | 'stats';
interface DriverProfileTemplateProps {
viewData: DriverProfileViewData;
isLoading?: boolean;
@@ -184,6 +183,14 @@ export function DriverProfileTemplate({
<Text size="sm" color="text-gray-500">This driver hasn&apos;t completed any races yet</Text>
</Stack>
)}
{activeTab === 'ratings' && (
<RatingBreakdown
skillRating={stats?.rating || 1450}
safetyRating={92} // Placeholder as not in viewData yet
sportsmanshipRating={4.8} // Placeholder as not in viewData yet
/>
)}
</Stack>
</Container>
);

27
apps/website/templates/DriversTemplate.tsx
View File

@@ -19,7 +19,8 @@ import { SkillDistribution } from '@/components/drivers/SkillDistribution';
import { CategoryDistribution } from '@/components/drivers/CategoryDistribution';
import { LeaderboardPreview } from '@/components/drivers/LeaderboardPreview';
import { RecentActivity } from '@/components/drivers/RecentActivity';
import { DriversHero } from '@/components/drivers/DriversHero';
import { HeroSection } from '@/components/shared/HeroSection';
import { Users, Trophy } from 'lucide-react';
import { DriversSearch } from '@/components/drivers/DriversSearch';
import { EmptyState } from '@/components/shared/state/EmptyState';
import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
@@ -53,12 +54,24 @@ export function DriversTemplate({
<Container size="lg" py={8}>
<Stack gap={10}>
{/* Hero Section */}
<DriversHero
driverCount={drivers.length}
activeCount={activeCount}
totalWins={totalWins}
totalRaces={totalRaces}
onViewLeaderboard={onViewLeaderboard}
<HeroSection
title="Drivers"
description="Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid."
icon={Users}
stats={[
{ label: 'drivers', value: drivers.length, color: 'text-primary-blue' },
{ label: 'active', value: activeCount, color: 'text-performance-green', animate: true },
{ label: 'total wins', value: totalWins.toLocaleString(), color: 'text-warning-amber' },
{ label: 'races', value: totalRaces.toLocaleString(), color: 'text-neon-aqua' },
]}
actions={[
{
label: 'View Leaderboard',
onClick: onViewLeaderboard,
icon: Trophy,
description: 'See full driver rankings'
}
]}
/>
{/* Search */}

5
apps/website/templates/HomeTemplate.tsx
View File

@@ -26,6 +26,7 @@ import { Surface } from '@/ui/Surface';
import { getMediaUrl } from '@/lib/utilities/media';
import { routes } from '@/lib/routing/RouteConfig';
import { FeatureItem, ResultItem, StepItem } from '@/components/landing/LandingItems';
import { ModeGuard } from '@/components/shared/ModeGuard';
export interface HomeViewData {
isAlpha: boolean;
@@ -152,7 +153,7 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
/>
{/* Alpha-only discovery section */}
{viewData.isAlpha && (
<ModeGuard feature="alpha_discovery">
<Container size="lg" py={12}>
<Stack gap={8}>
<Box>
@@ -266,7 +267,7 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
</Grid>
</Stack>
</Container>
)}
</ModeGuard>
<DiscordCTA />
<FAQ />

2
apps/website/templates/LeagueDetailTemplate.tsx
View File

@@ -6,7 +6,7 @@ import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
import { LeagueTabs } from '@/components/leagues/LeagueTabs';
import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';

29
apps/website/templates/LeagueRulebookTemplate.tsx
View File

@@ -13,6 +13,7 @@ import PointsTable from '@/components/leagues/PointsTable';
import { RulebookTabs, type RulebookSection } from '@/components/leagues/RulebookTabs';
import type { LeagueRulebookViewData } from '@/lib/view-data/LeagueRulebookViewData';
import { Surface } from '@/ui/Surface';
import { Clock } from 'lucide-react';
interface LeagueRulebookTemplateProps {
viewData: LeagueRulebookViewData;
@@ -81,6 +82,34 @@ export function LeagueRulebookTemplate({
<StatItem label="Drop Policy" value={scoringConfig.dropPolicySummary.includes('All') ? 'None' : 'Active'} />
</Grid>
{/* Weekend Structure */}
<Card>
<Stack gap={4}>
<Stack direction="row" align="center" gap={2}>
<Clock className="w-5 h-5 text-primary-blue" />
<Heading level={2}>Weekend Structure & Timings</Heading>
</Stack>
<Grid cols={4} gap={4}>
<Surface variant="muted" rounded="lg" border padding={3}>
<Text size="xs" color="text-gray-500" block mb={1} style={{ textTransform: 'uppercase' }}>Practice</Text>
<Text weight="medium" color="text-white">20 min</Text>
</Surface>
<Surface variant="muted" rounded="lg" border padding={3}>
<Text size="xs" color="text-gray-500" block mb={1} style={{ textTransform: 'uppercase' }}>Qualifying</Text>
<Text weight="medium" color="text-white">30 min</Text>
</Surface>
<Surface variant="muted" rounded="lg" border padding={3}>
<Text size="xs" color="text-gray-500" block mb={1} style={{ textTransform: 'uppercase' }}>Sprint</Text>
<Text weight="medium" color="text-white">—</Text>
</Surface>
<Surface variant="muted" rounded="lg" border padding={3}>
<Text size="xs" color="text-gray-500" block mb={1} style={{ textTransform: 'uppercase' }}>Main Race</Text>
<Text weight="medium" color="text-white">40 min</Text>
</Surface>
</Grid>
</Stack>
</Card>
{/* Points Table */}
<PointsTable points={positionPoints} />

26
apps/website/templates/LeagueScheduleTemplate.tsx
View File

@@ -1,16 +1,12 @@
'use client';
import React from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Calendar } from 'lucide-react';
import type { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
import { ScheduleRaceCard } from '@/components/leagues/ScheduleRaceCard';
import { Surface } from '@/ui/Surface';
import LeagueSchedule from '@/components/leagues/LeagueSchedule';
interface LeagueScheduleTemplateProps {
viewData: LeagueScheduleViewData;
@@ -26,25 +22,7 @@ export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps
</Text>
</Box>
{viewData.races.length === 0 ? (
<Card>
<Stack align="center" py={12} gap={4}>
<Surface variant="muted" rounded="full" padding={4} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)' }}>
<Icon icon={Calendar} size={8} color="#10b981" />
</Surface>
<Box style={{ textAlign: 'center' }}>
<Text weight="semibold" size="lg" color="text-white" block mb={2}>No Races Scheduled</Text>
<Text size="sm" color="text-gray-400">The race schedule will appear here once events are added.</Text>
</Box>
</Stack>
</Card>
) : (
<Stack gap={4}>
{viewData.races.map((race) => (
<ScheduleRaceCard key={race.id} race={race} />
))}
</Stack>
)}
<LeagueSchedule leagueId={viewData.leagueId} />
</Stack>
);
}

218
apps/website/templates/LeagueSponsorshipsTemplate.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import React from 'react';
import React, { useState } from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
@@ -9,107 +9,145 @@ import { Heading } from '@/ui/Heading';
import { Grid } from '@/ui/Grid';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { Building, Clock } from 'lucide-react';
import { Building, Clock, Palette } from 'lucide-react';
import type { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
import { SponsorshipSlotCard } from '@/components/leagues/SponsorshipSlotCard';
import { SponsorshipRequestCard } from '@/components/leagues/SponsorshipRequestCard';
import LeagueDecalPlacementEditor from '@/components/leagues/LeagueDecalPlacementEditor';
interface LeagueSponsorshipsTemplateProps {
viewData: LeagueSponsorshipsViewData;
}
export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTemplateProps) {
const [activeTab, setActiveTab] = useState<'overview' | 'editor'>('overview');
return (
<Stack gap={6}>
<Box>
<Heading level={2}>Sponsorships</Heading>
<Text size="sm" color="text-gray-400" block mt={1}>
Manage sponsorship slots and review requests
</Text>
</Box>
<Stack gap={6}>
{/* Sponsorship Slots */}
<Card>
<Stack gap={4}>
<Stack direction="row" align="center" gap={3}>
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
<Icon icon={Building} size={5} color="#3b82f6" />
</Surface>
<Box>
<Heading level={3}>Sponsorship Slots</Heading>
<Text size="sm" color="text-gray-400">Available sponsorship opportunities</Text>
</Box>
</Stack>
{viewData.sponsorshipSlots.length === 0 ? (
<Stack align="center" py={8} gap={4}>
<Icon icon={Building} size={12} color="#525252" />
<Text color="text-gray-400">No sponsorship slots available</Text>
</Stack>
) : (
<Grid cols={3} gap={4}>
{viewData.sponsorshipSlots.map((slot) => (
<SponsorshipSlotCard key={slot.id} slot={slot} />
))}
</Grid>
)}
</Stack>
</Card>
{/* Sponsorship Requests */}
<Card>
<Stack gap={4}>
<Stack direction="row" align="center" gap={3}>
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)' }}>
<Icon icon={Clock} size={5} color="#f59e0b" />
</Surface>
<Box>
<Heading level={3}>Sponsorship Requests</Heading>
<Text size="sm" color="text-gray-400">Pending and processed sponsorship applications</Text>
</Box>
</Stack>
{viewData.sponsorshipRequests.length === 0 ? (
<Stack align="center" py={8} gap={4}>
<Icon icon={Clock} size={12} color="#525252" />
<Text color="text-gray-400">No sponsorship requests</Text>
</Stack>
) : (
<Stack gap={3}>
{viewData.sponsorshipRequests.map((request) => {
const slot = viewData.sponsorshipSlots.find(s => s.id === request.slotId);
return (
<SponsorshipRequestCard
key={request.id}
request={{
...request,
status: request.status as any,
slotName: slot?.name || 'Unknown slot'
}}
/>
);
})}
</Stack>
)}
</Stack>
</Card>
{/* Note about management */}
<Card>
<Stack align="center" py={8} gap={4}>
<Surface variant="muted" rounded="full" padding={4} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
<Icon icon={Building} size={8} color="#3b82f6" />
</Surface>
<Box style={{ textAlign: 'center' }}>
<Heading level={3}>Sponsorship Management</Heading>
<Text size="sm" color="text-gray-400" block mt={2}>
Interactive management features for approving requests and managing slots will be implemented in future updates.
</Text>
</Box>
</Stack>
</Card>
<Stack direction="row" align="center" justify="between">
<Box>
<Heading level={2}>Sponsorships</Heading>
<Text size="sm" color="text-gray-400" block mt={1}>
Manage sponsorship slots and review requests
</Text>
</Box>
<Stack direction="row" gap={2}>
<button
onClick={() => setActiveTab('overview')}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
activeTab === 'overview'
? 'bg-primary-blue text-white'
: 'bg-iron-gray text-gray-400 hover:text-white'
}`}
>
Overview
</button>
<button
onClick={() => setActiveTab('editor')}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
activeTab === 'editor'
? 'bg-primary-blue text-white'
: 'bg-iron-gray text-gray-400 hover:text-white'
}`}
>
Livery Editor
</button>
</Stack>
</Stack>
{activeTab === 'overview' ? (
<Stack gap={6}>
{/* Sponsorship Slots */}
<Card>
<Stack gap={4}>
<Stack direction="row" align="center" gap={3}>
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
<Icon icon={Building} size={5} color="#3b82f6" />
</Surface>
<Box>
<Heading level={3}>Sponsorship Slots</Heading>
<Text size="sm" color="text-gray-400">Available sponsorship opportunities</Text>
</Box>
</Stack>
{viewData.sponsorshipSlots.length === 0 ? (
<Stack align="center" py={8} gap={4}>
<Icon icon={Building} size={12} color="#525252" />
<Text color="text-gray-400">No sponsorship slots available</Text>
</Stack>
) : (
<Grid cols={3} gap={4}>
{viewData.sponsorshipSlots.map((slot) => (
<SponsorshipSlotCard key={slot.id} slot={slot} />
))}
</Grid>
)}
</Stack>
</Card>
{/* Sponsorship Requests */}
<Card>
<Stack gap={4}>
<Stack direction="row" align="center" gap={3}>
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)' }}>
<Icon icon={Clock} size={5} color="#f59e0b" />
</Surface>
<Box>
<Heading level={3}>Sponsorship Requests</Heading>
<Text size="sm" color="text-gray-400">Pending and processed sponsorship applications</Text>
</Box>
</Stack>
{viewData.sponsorshipRequests.length === 0 ? (
<Stack align="center" py={8} gap={4}>
<Icon icon={Clock} size={12} color="#525252" />
<Text color="text-gray-400">No sponsorship requests</Text>
</Stack>
) : (
<Stack gap={3}>
{viewData.sponsorshipRequests.map((request) => {
const slot = viewData.sponsorshipSlots.find(s => s.id === request.slotId);
return (
<SponsorshipRequestCard
key={request.id}
request={{
...request,
status: request.status as any,
slotName: slot?.name || 'Unknown slot'
}}
/>
);
})}
</Stack>
)}
</Stack>
</Card>
</Stack>
) : (
<Card>
<Stack gap={6}>
<Stack direction="row" align="center" gap={3}>
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(168, 85, 247, 0.1)' }}>
<Icon icon={Palette} size={5} color="#a855f7" />
</Surface>
<Box>
<Heading level={3}>League Livery Editor</Heading>
<Text size="sm" color="text-gray-400">Configure where sponsor decals appear on league cars</Text>
</Box>
</Stack>
<LeagueDecalPlacementEditor
leagueId={viewData.leagueId}
seasonId="current"
carId="gt3-r"
carName="Porsche 911 GT3 R (992)"
onSave={(placements) => {
console.log('Placements saved:', placements);
}}
/>
</Stack>
</Card>
)}
</Stack>
);
}

19
apps/website/templates/LeagueWalletTemplate.tsx
View File

@@ -8,9 +8,10 @@ import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { Wallet, Calendar } from 'lucide-react';
import { Wallet, Calendar, DollarSign } from 'lucide-react';
import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
import { TransactionRow } from '@/components/leagues/TransactionRow';
import { LeagueMembershipFeesSection } from '@/components/leagues/LeagueMembershipFeesSection';
interface LeagueWalletTemplateProps {
viewData: LeagueWalletViewData;
@@ -70,6 +71,22 @@ export function LeagueWalletTemplate({ viewData }: LeagueWalletTemplateProps) {
</Stack>
</Card>
{/* Membership Fees */}
<Card>
<Stack gap={4}>
<Stack direction="row" align="center" gap={3}>
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)' }}>
<Icon icon={DollarSign} size={5} color="#10b981" />
</Surface>
<Box>
<Heading level={3}>Membership Fees</Heading>
<Text size="sm" color="text-gray-400">Configure how drivers pay for participation</Text>
</Box>
</Stack>
<LeagueMembershipFeesSection leagueId={viewData.leagueId} />
</Stack>
</Card>
{/* Note about features */}
<Card>
<Stack align="center" py={8} gap={4}>

2
apps/website/templates/ProfileTemplate.tsx
View File

@@ -25,7 +25,7 @@ import {
History,
User,
} from 'lucide-react';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
export type ProfileTab = 'overview' | 'history' | 'stats';

2
apps/website/templates/RaceDetailTemplate.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import React from 'react';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
import { Button } from '@/ui/Button';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';

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

@@ -1,7 +1,7 @@
'use client';
import React from 'react';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';

2
apps/website/templates/RaceStewardingTemplate.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import React from 'react';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
import RaceStewardingStats from '@/components/races/RaceStewardingStats';
import { StewardingTabs } from '@/components/races/StewardingTabs';
import { ProtestCard } from '@/components/races/ProtestCard';

2
apps/website/templates/RacesAllTemplate.tsx
View File

@@ -4,7 +4,7 @@ import React, { useMemo, useEffect } from 'react';
import { Card } from '@/ui/Card';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
import {
Flag,
SlidersHorizontal,

2
apps/website/templates/TeamDetailTemplate.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
import { SlotTemplates } from '@/components/sponsors/SlotTemplates';
import SponsorInsightsCard from '@/components/sponsors/SponsorInsightsCard';
import { useSponsorMode } from '@/hooks/sponsor/useSponsorMode';