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-21 01:27:08 +01:00
parent 5f3712e5ab
commit d30a725fe7
44 changed files with 702 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,7 +50,7 @@ export function DriverProfileTemplate({
}: DriverProfileTemplateProps) {
if (isLoading) {
return (
<Container size="lg" py={12}>
<Container size="lg" spacing="lg">
<Stack align="center" justify="center" gap={4}>
<LoadingSpinner size={10} />
<Text color="text-gray-400">Loading driver profile...</Text>
@@ -61,7 +61,7 @@ export function DriverProfileTemplate({
if (error || !viewData?.currentDriver) {
return (
<Container size="md" py={12}>
<Container size="md" spacing="lg">
<Stack align="center" gap={6}>
<Text color="text-warning-amber">{error || 'Driver not found'}</Text>
<Button variant="secondary" onClick={onBackClick}>
@@ -84,7 +84,7 @@ export function DriverProfileTemplate({
] : [];
return (
<Container size="lg" py={8}>
<Container size="lg" spacing="md">
<Stack gap={6}>
{/* Back Navigation & Breadcrumbs */}
<Stack gap={4}>

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

@@ -27,7 +27,7 @@ export function DriverRankingsTemplate({
onBackToLeaderboards,
}: DriverRankingsTemplateProps): React.ReactElement {
return (
<Container size="lg" py={8}>
<Container size="lg" spacing="md">
<PageHeader
title="Driver Leaderboard"
description="Full rankings of all drivers by performance metrics"

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

@@ -5,6 +5,8 @@ import { DriverCard } from '@/components/drivers/DriverCard';
import { DriverStatsHeader } from '@/components/drivers/DriverStatsHeader';
import { DriverGrid } from '@/components/drivers/DriverGrid';
import { PageHeader } from '@/ui/PageHeader';
import { Section } from '@/ui/Section';
import { Stack } from '@/ui/Stack';
import { Input } from '@/ui/Input';
import { Button } from '@/ui/Button';
import { Container } from '@/ui/Container';
@@ -30,54 +32,55 @@ export function DriversTemplate({
}: DriversTemplateProps) {
return (
<main>
<PageHeader
title="Drivers"
description="Global driver roster and statistics."
action={
<Button
variant="secondary"
onClick={onViewLeaderboard}
>
Leaderboard
</Button>
}
/>
<Container size="full" padding="none" py={8}>
<DriverStatsHeader
totalDrivers={viewData.totalDriversLabel}
activeDrivers={viewData.activeCountLabel}
totalRaces={viewData.totalRacesLabel}
<Section variant="default" padding="md">
<PageHeader
title="Drivers"
description="Global driver roster and statistics."
icon={Users}
action={
<Button
variant="secondary"
onClick={onViewLeaderboard}
>
Leaderboard
</Button>
}
/>
</Container>
<Container size="full" padding="none" py={6}>
<Input
placeholder="Search drivers by name or nationality..."
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
icon={Search}
variant="search"
/>
</Container>
<Stack gap={12}>
<DriverStatsHeader
totalDrivers={viewData.totalDriversLabel}
activeDrivers={viewData.activeCountLabel}
totalRaces={viewData.totalRacesLabel}
/>
{filteredDrivers.length > 0 ? (
<DriverGrid>
{filteredDrivers.map(driver => (
<DriverCard
key={driver.id}
driver={driver}
onClick={onDriverClick}
<Input
placeholder="Search drivers by name or nationality..."
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
icon={Search}
variant="search"
/>
{filteredDrivers.length > 0 ? (
<DriverGrid>
{filteredDrivers.map(driver => (
<DriverCard
key={driver.id}
driver={driver}
onClick={onDriverClick}
/>
))}
</DriverGrid>
) : (
<EmptyState
title="No drivers found"
description={`No drivers match "${searchQuery}"`}
icon={Search}
/>
))}
</DriverGrid>
) : (
<EmptyState
title="No drivers found"
description={`No drivers match "${searchQuery}"`}
icon={Search}
/>
)}
)}
</Stack>
</Section>
</main>
);
}

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

@@ -42,31 +42,33 @@ interface HomeTemplateProps {
export function HomeTemplate({ viewData }: HomeTemplateProps) {
return (
<main>
{/* Hero Section - Admin Focus */}
<Hero />
<Stack gap={0}>
{/* Hero Section - Admin Focus */}
<Hero />
{/* Admin Pain/Solution Strip */}
<TelemetryStrip />
{/* Admin Pain/Solution Strip */}
<TelemetryStrip />
{/* Core Admin Features */}
<ValuePillars />
{/* Core Admin Features */}
<ValuePillars />
{/* Stewarding Workflow Preview */}
<StewardingPreview
race={viewData.upcomingRaces[0]}
team={viewData.teams[0]}
/>
{/* Stewarding Workflow Preview */}
<StewardingPreview
race={viewData.upcomingRaces[0]}
team={viewData.teams[0]}
/>
{/* League Identity Showcase */}
<LeagueIdentityPreview
league={viewData.topLeagues[0]}
/>
{/* League Identity Showcase */}
<LeagueIdentityPreview
league={viewData.topLeagues[0]}
/>
{/* Migration Offer */}
<MigrationSection />
{/* Migration Offer */}
<MigrationSection />
{/* Final CTA */}
<CtaSection />
{/* Final CTA */}
<CtaSection />
</Stack>
</main>
);
}

122
apps/website/templates/LeaderboardsTemplate.tsx
View File

@@ -42,71 +42,69 @@ export function LeaderboardsTemplate({
.slice(0, 5);
return (
<Section variant="default" padding="none" py={12}>
<Container size="full" padding="lg">
<Stack gap={16}>
<PageHeader
title="Leaderboards"
description="Global Performance Standings"
icon={Activity}
action={
<Group gap={4}>
<Button
variant="secondary"
onClick={onNavigateToDrivers}
icon={<Icon icon={Trophy} size={4} />}
>
Drivers
</Button>
<Button
variant="secondary"
onClick={onNavigateToTeams}
icon={<Icon icon={Users} size={4} />}
>
Teams
</Button>
</Group>
}
/>
<Section variant="default" padding="md">
<Stack gap={16}>
<PageHeader
title="Leaderboards"
description="Global Performance Standings"
icon={Activity}
action={
<Group gap={4}>
<Button
variant="secondary"
onClick={onNavigateToDrivers}
icon={<Icon icon={Trophy} size={4} />}
>
Drivers
</Button>
<Button
variant="secondary"
onClick={onNavigateToTeams}
icon={<Icon icon={Users} size={4} />}
>
Teams
</Button>
</Group>
}
/>
{/* Top 10 2026 up top */}
<DriverLeaderboardPreview
title="Top 10 Drivers 2026"
subtitle="Current Season Standings"
drivers={top10Drivers}
onDriverClick={onDriverClick}
onNavigateToDrivers={onNavigateToDrivers}
/>
{/* Top 10 2026 up top */}
<DriverLeaderboardPreview
title="Top 10 Drivers 2026"
subtitle="Current Season Standings"
drivers={top10Drivers}
onDriverClick={onDriverClick}
onNavigateToDrivers={onNavigateToDrivers}
/>
<FeatureGrid columns={{ base: 1, lg: 2 }} gap={12}>
<TeamLeaderboardPreview
teams={top5Teams.map(t => ({
...t,
logoUrl: t.logoUrl || ''
}))}
onTeamClick={onTeamClick}
onNavigateToTeams={onNavigateToTeams}
<FeatureGrid columns={{ base: 1, lg: 2 }} gap={12}>
<TeamLeaderboardPreview
teams={top5Teams.map(t => ({
...t,
logoUrl: t.logoUrl || ''
}))}
onTeamClick={onTeamClick}
onNavigateToTeams={onNavigateToTeams}
/>
<Stack gap={12}>
<DriverLeaderboardPreview
title="Top Newcomers"
subtitle="Rising Stars (< 10 Races)"
drivers={topNewcomers}
onDriverClick={onDriverClick}
onNavigateToDrivers={onNavigateToDrivers}
/>
<Stack gap={12}>
<DriverLeaderboardPreview
title="Top Newcomers"
subtitle="Rising Stars (< 10 Races)"
drivers={topNewcomers}
onDriverClick={onDriverClick}
onNavigateToDrivers={onNavigateToDrivers}
/>
<DriverLeaderboardPreview
title="Top All Time"
subtitle="Most Wins"
drivers={topAllTime}
onDriverClick={onDriverClick}
onNavigateToDrivers={onNavigateToDrivers}
/>
</Stack>
</FeatureGrid>
</Stack>
</Container>
<DriverLeaderboardPreview
title="Top All Time"
subtitle="Most Wins"
drivers={topAllTime}
onDriverClick={onDriverClick}
onNavigateToDrivers={onNavigateToDrivers}
/>
</Stack>
</FeatureGrid>
</Stack>
</Section>
);
}

81
apps/website/templates/LeaguesTemplate.tsx
View File

@@ -8,6 +8,8 @@ import { Input } from '@/ui/Input';
import { Button } from '@/ui/Button';
import { Group } from '@/ui/Group';
import { Container } from '@/ui/Container';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';
import { Section } from '@/ui/Section';
@@ -71,7 +73,7 @@ export function LeaguesTemplate({
onClearFilters,
}: LeaguesTemplateProps) {
return (
<Section variant="default" padding="lg">
<Section variant="default" padding="md">
{/* Header Section */}
<PageHeader
icon={Trophy}
@@ -82,15 +84,15 @@ export function LeaguesTemplate({
onClick={onCreateLeague}
variant="primary"
size="lg"
icon={<Plus size={16} />}
icon={<Icon icon={Plus} size={4} />}
>
Create League
</Button>
}
/>
{/* Stats Overview */}
<Container size="full" padding="none" py={8}>
<Stack gap={12}>
{/* Stats Overview */}
<FeatureGrid columns={{ base: 1, md: 3 }} gap={4}>
<MetricCard
label="Active Leagues"
@@ -111,38 +113,35 @@ export function LeaguesTemplate({
intent="success"
/>
</FeatureGrid>
</Container>
{/* Control Bar */}
<ControlBar
leftContent={
<Group gap={4} align="center">
<Icon icon={Filter} size={4} intent="low" />
<SegmentedControl
options={categories.map(c => ({
id: c.id,
label: c.label,
icon: <Icon icon={c.icon} size={3} />
}))}
activeId={activeCategory}
onChange={(id) => onCategoryChange(id as CategoryId)}
/>
</Group>
}
>
<Input
type="text"
placeholder="Search infrastructure..."
value={searchQuery}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
icon={<Search size={16} />}
size="sm"
width="300px"
/>
</ControlBar>
{/* Control Bar */}
<ControlBar
leftContent={
<Group gap={4} align="center">
<Icon icon={Filter} size={4} intent="low" />
<SegmentedControl
options={categories.map(c => ({
id: c.id,
label: c.label,
icon: <Icon icon={c.icon} size={3} />
}))}
activeId={activeCategory}
onChange={(id) => onCategoryChange(id as CategoryId)}
/>
</Group>
}
>
<Input
type="text"
placeholder="Search infrastructure..."
value={searchQuery}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
icon={<Icon icon={Search} size={4} />}
size="sm"
/>
</ControlBar>
{/* Results */}
<Container size="full" padding="none" py={6}>
{/* Results */}
{filteredLeagues.length > 0 ? (
<FeatureGrid columns={{ base: 1, md: 2, lg: 3 }} gap={6}>
{filteredLeagues.map((league) => (
@@ -154,23 +153,23 @@ export function LeaguesTemplate({
))}
</FeatureGrid>
) : (
<Section variant="dark" padding="lg">
<Group direction="col" align="center" justify="center" gap={4}>
<Surface variant="dark" padding={12} rounded="xl" border>
<Stack align="center" justify="center" gap={6}>
<Icon icon={Search} size={12} intent="low" />
<Group direction="col" align="center" gap={1}>
<Stack align="center" gap={2}>
<Text size="lg" weight="bold">No results found</Text>
<Text variant="low" size="sm">Adjust filters to find matching infrastructure.</Text>
</Group>
</Stack>
<Button
variant="secondary"
onClick={onClearFilters}
>
Reset Filters
</Button>
</Group>
</Section>
</Stack>
</Surface>
)}
</Container>
</Stack>
</Section>
);
}

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

@@ -13,7 +13,7 @@ interface ProfileLayoutShellTemplateProps {
export function ProfileLayoutShellTemplate({ viewData, children }: ProfileLayoutShellTemplateProps) {
return (
<Box minHeight="screen" backgroundColor="#0C0D0F">
<Container size="lg" py={8}>
<Container size="lg" spacing="md">
<Stack direction="row" gap={8} alignItems="start">
<Box as="aside" width="64" flexShrink={0}>
<ProfileSidebarTemplate viewData={viewData} />

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

@@ -117,7 +117,7 @@ export function RaceDetailTemplate({
}: RaceDetailTemplateProps) {
if (isLoading) {
return (
<Container size="lg" py={8}>
<Container size="lg" spacing="md">
<Stack gap={6}>
<Skeleton width="8rem" height="1.5rem" />
<Skeleton width="100%" height="12rem" />
@@ -134,7 +134,7 @@ export function RaceDetailTemplate({
if (error || !viewData || !viewData.race) {
return (
<Container size="md" py={8}>
<Container size="md" spacing="md">
<Box bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={12} textAlign="center" rounded="xl">
<Stack alignItems="center" gap={4}>
<Text as="h2" size="xl" weight="bold" color="text-white">Race Not Found</Text>
@@ -174,7 +174,7 @@ export function RaceDetailTemplate({
onBack={onBack}
/>
<Container size="lg" py={8}>
<Container size="lg" spacing="md">
<Stack gap={8}>
{userResult && (
<RaceUserResult

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

@@ -46,7 +46,7 @@ export function RaceResultsTemplate({
if (isLoading) {
return (
<Container size="lg" py={12}>
<Container size="lg" spacing="lg">
<Stack alignItems="center">
<Text color="text-gray-400">Loading results...</Text>
</Stack>
@@ -56,7 +56,7 @@ export function RaceResultsTemplate({
if (error && !viewData.raceTrack) {
return (
<Container size="md" py={12}>
<Container size="md" spacing="lg">
<Box bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={12} textAlign="center" rounded="xl">
<Stack alignItems="center" gap={4}>
<Text color="text-warning-amber">{error?.message || 'Race not found'}</Text>
@@ -93,7 +93,7 @@ export function RaceResultsTemplate({
onBack={onBack}
/>
<Container size="lg" py={8}>
<Container size="lg" spacing="md">
<Stack gap={8}>
{importSuccess && (
<Box p={4} bg="bg-success-green" bgOpacity={0.1} border borderColor="border-success-green" rounded>

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

@@ -46,7 +46,7 @@ export function RaceStewardingTemplate({
if (isLoading) {
return (
<Container size="lg" py={12}>
<Container size="lg" spacing="lg">
<Stack alignItems="center">
<Text color="text-gray-400">Loading stewarding data...</Text>
</Stack>
@@ -56,7 +56,7 @@ export function RaceStewardingTemplate({
if (!viewData?.race) {
return (
<Container size="md" py={12}>
<Container size="md" spacing="lg">
<Box bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={12} textAlign="center" rounded="xl">
<Stack alignItems="center" gap={4}>
<Text as="h2" size="xl" weight="bold" color="text-white">Race Not Found</Text>
@@ -94,7 +94,7 @@ export function RaceStewardingTemplate({
onBack={onBack}
/>
<Container size="lg" py={8}>
<Container size="lg" spacing="md">
<Stack gap={8}>
<Grid cols={12} gap={6}>
<GridItem colSpan={12} lgSpan={8}>

48
apps/website/templates/RacesIndexTemplate.tsx
View File

@@ -9,7 +9,9 @@ import { NextUpRacePanel } from '@/components/races/NextUpRacePanel';
import { RacesDayGroup } from '@/components/races/RacesDayGroup';
import { RacesEmptyState } from '@/components/races/RacesEmptyState';
import { RaceFilterModal } from '@/components/races/RaceFilterModal';
import { PageHeader } from '@/components/shared/PageHeader';
import { PageHeader } from '@/ui/PageHeader';
import { Stack } from '@/ui/Stack';
import { Flag } from 'lucide-react';
import type { RacesViewData, RaceViewData } from '@/lib/view-data/RacesViewData';
export interface RacesIndexTemplateProps {
@@ -45,22 +47,21 @@ export function RacesIndexTemplate({
const hasRaces = viewData.racesByDate.length > 0;
return (
<Section variant="default" padding="lg">
<Section variant="default" padding="md">
<PageHeader
title="Races"
subtitle="Live Sessions & Upcoming Events"
description="Live Sessions & Upcoming Events"
icon={Flag}
/>
{/* 1. Status Rail: Live sessions first */}
<Container size="full" padding="none" py={8}>
<Stack gap={12}>
{/* 1. Status Rail: Live sessions first */}
<RacesLiveRail
liveRaces={viewData.liveRaces}
onRaceClick={onRaceClick}
/>
</Container>
{/* 2. Command Bar: Fast filters */}
<Container size="full" padding="none" py={4}>
{/* 2. Command Bar: Fast filters */}
<RacesCommandBar
timeFilter={timeFilter}
setTimeFilter={setTimeFilter}
@@ -69,34 +70,31 @@ export function RacesIndexTemplate({
leagues={viewData.leagues}
onShowMoreFilters={() => setShowFilterModal(true)}
/>
</Container>
{/* 3. Next Up: High signal panel */}
{timeFilter === 'upcoming' && viewData.nextUpRace && (
<Container size="full" padding="none" py={8}>
{/* 3. Next Up: High signal panel */}
{timeFilter === 'upcoming' && viewData.nextUpRace && (
<NextUpRacePanel
race={viewData.nextUpRace}
onRaceClick={onRaceClick}
/>
</Container>
)}
)}
{/* 4. Browse by Day: Grouped schedule */}
{hasRaces ? (
<Container size="full" padding="none" py={8}>
{viewData.racesByDate.map((group) => (
<Container key={group.dateKey} size="full" padding="none" py={4}>
{/* 4. Browse by Day: Grouped schedule */}
{hasRaces ? (
<Stack gap={8}>
{viewData.racesByDate.map((group) => (
<RacesDayGroup
key={group.dateKey}
dateLabel={group.dateLabel}
races={group.races}
onRaceClick={onRaceClick}
/>
</Container>
))}
</Container>
) : (
<RacesEmptyState />
)}
))}
</Stack>
) : (
<RacesEmptyState />
)}
</Stack>
<RaceFilterModal
isOpen={showFilterModal}

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

@@ -76,7 +76,7 @@ export function SponsorBillingTemplate({
}));
return (
<Container size="lg" py={8}>
<Container size="lg" spacing="md">
<Stack gap={8}>
<SponsorDashboardHeader
sponsorName="Sponsor"

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

@@ -93,7 +93,7 @@ export function SponsorCampaignsTemplate({
];
return (
<Container size="lg" py={8}>
<Container size="lg" spacing="md">
<Stack gap={8}>
<SponsorDashboardHeader
sponsorName="Sponsor"

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

@@ -85,7 +85,7 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
}));
return (
<Container size="lg" py={8}>
<Container size="lg" spacing="md">
<Stack gap={8}>
{/* Header */}
<SponsorDashboardHeader

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

@@ -74,7 +74,7 @@ export function SponsorLeaguesTemplate({
const stats = viewData.stats;
return (
<Container size="lg" py={8}>
<Container size="lg" spacing="md">
<Stack gap={8}>
{/* Breadcrumb */}
<Box>

4
apps/website/templates/SponsorSettingsTemplate.tsx
View File

@@ -82,7 +82,7 @@ export function SponsorSettingsTemplate({
saving,
}: SponsorSettingsTemplateProps) {
return (
<Container size="md" py={8}>
<Container size="md" spacing="md">
<Stack gap={8}>
<SponsorDashboardHeader
sponsorName={profile.companyName}
@@ -187,7 +187,7 @@ export function SponsorSettingsTemplate({
{/* Danger Zone */}
<Card border borderColor="border-racing-red/30">
<Stack gap={6}>
<Heading level={3} color="text-racing-red" icon={<Icon icon={AlertCircle} size={5} color="text-racing-red" />}>
<Heading level={3} intent="critical" icon={<Icon icon={AlertCircle} size={5} />}>
Danger Zone
</Heading>
<Box display="flex" alignItems="center" justifyContent="between">

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

@@ -26,7 +26,7 @@ export function TeamRankingsTemplate({
onBackToLeaderboards,
}: TeamRankingsTemplateProps): React.ReactElement {
return (
<Container size="lg" py={8}>
<Container size="lg" spacing="md">
<PageHeader
title="Team Leaderboard"
description="Global rankings of all teams based on performance and consistency"

62
apps/website/templates/TeamsTemplate.tsx
View File

@@ -8,9 +8,12 @@ import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
import { TeamGrid } from '@/components/teams/TeamGrid';
import { TeamCard } from '@/components/teams/TeamCard';
import { TeamSearchBar } from '@/components/teams/TeamSearchBar';
import { PageHeader } from '@/ui/PageHeader';
import { Button } from '@/ui/Button';
import { EmptyState } from '@/ui/EmptyState';
import { Container } from '@/ui/Container';
import { Section } from '@/ui/Section';
import { Stack } from '@/ui/Stack';
import { Carousel } from '@/components/shared/Carousel';
interface TeamsTemplateProps extends TemplateProps<TeamsViewData> {
@@ -63,21 +66,32 @@ export function TeamsTemplate({
}, [teams, filteredTeams, searchQuery]);
return (
<Section variant="default" padding="lg">
<TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
<Container size="full" padding="none" py={12}>
<Section variant="default" padding="md">
<PageHeader
title="Teams"
description="Professional racing organizations and community teams."
icon={Users}
action={
<Button
variant="secondary"
onClick={onViewFullLeaderboard}
>
Leaderboard
</Button>
}
/>
<Stack gap={12}>
<TeamSearchBar
searchQuery={searchQuery}
onSearchChange={onSearchChange}
/>
</Container>
{clusters.length > 0 ? (
<Container size="full" padding="none">
{clusters.map((cluster, index) => (
<Container key={cluster.title} size="full" padding="none" py={index === 0 ? 0 : 10}>
{clusters.length > 0 ? (
<Stack gap={12}>
{clusters.map((cluster) => (
<Carousel
key={cluster.title}
title={cluster.title}
count={cluster.teams.length}
>
@@ -89,21 +103,21 @@ export function TeamsTemplate({
/>
))}
</Carousel>
</Container>
))}
</Container>
) : (
<EmptyState
icon={Users}
title={searchQuery ? "No matching teams" : "No teams yet"}
description={searchQuery ? "Try adjusting your search filters" : "Get started by creating your first racing team"}
action={{
label: 'Create Team',
onClick: onCreateTeam,
variant: 'primary'
}}
/>
)}
))}
</Stack>
) : (
<EmptyState
icon={Users}
title={searchQuery ? "No matching teams" : "No teams yet"}
description={searchQuery ? "Try adjusting your search filters" : "Get started by creating your first racing team"}
action={{
label: 'Create Team',
onClick: onCreateTeam,
variant: 'primary'
}}
/>
)}
</Stack>
</Section>
);
}