97 lines
3.9 KiB
TypeScript
97 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Section } from '@/ui/Section';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Card } from '@/ui/Card';
|
|
import { Button } from '@/ui/Button';
|
|
import { FeatureGrid } from '@/ui/FeatureGrid';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Trophy, Users, Flag } from 'lucide-react';
|
|
|
|
interface EcosystemGridProps {
|
|
leagues: Array<{ id: string; name: string; description: string }>;
|
|
teams: Array<{ id: string; name: string; description: string }>;
|
|
races: Array<{ id: string; track: string; car: string; formattedDate: string }>;
|
|
}
|
|
|
|
/**
|
|
* EcosystemGrid - Discovery section for the live ecosystem.
|
|
* Designed with a "grid" layout and precision details.
|
|
* Uses ONLY UI components.
|
|
*/
|
|
export function EcosystemGrid({ leagues, teams, races }: EcosystemGridProps) {
|
|
return (
|
|
<Section variant="muted" padding="lg">
|
|
<Stack direction="col" gap={16}>
|
|
<Stack direction={{ base: 'col', md: 'row' }} align="end" justify="between" gap={8}>
|
|
<Stack direction="col" gap={4} maxWidth="42rem">
|
|
<Text variant="primary" weight="bold" uppercase size="xs">
|
|
Live Ecosystem
|
|
</Text>
|
|
<Heading level={2} weight="bold">
|
|
THE GRID
|
|
</Heading>
|
|
<Text size="lg" variant="med" block>
|
|
Explore the leagues, teams, and races that define the GridPilot ecosystem.
|
|
</Text>
|
|
</Stack>
|
|
<Button variant="secondary" size="md">
|
|
VIEW ALL DATA
|
|
</Button>
|
|
</Stack>
|
|
|
|
<FeatureGrid columns={{ base: 1, lg: 3 }} gap={8}>
|
|
{/* Leagues Column */}
|
|
<Stack direction="col" gap={6}>
|
|
<Stack direction="row" align="center" gap={2} px={2}>
|
|
<Trophy className="w-4 h-4 text-[var(--ui-color-text-low)]" />
|
|
<Text size="sm" weight="bold" uppercase variant="low">Top Leagues</Text>
|
|
</Stack>
|
|
{leagues.slice(0, 3).map((league) => (
|
|
<Card key={league.id} variant="default" padding="md">
|
|
<Heading level={5} weight="bold">{league.name}</Heading>
|
|
<Text size="sm" variant="low" leading="snug" block mt={2}>{league.description}</Text>
|
|
</Card>
|
|
))}
|
|
</Stack>
|
|
|
|
{/* Teams Column */}
|
|
<Stack direction="col" gap={6}>
|
|
<Stack direction="row" align="center" gap={2} px={2}>
|
|
<Users className="w-4 h-4 text-[var(--ui-color-text-low)]" />
|
|
<Text size="sm" weight="bold" uppercase variant="low">Active Teams</Text>
|
|
</Stack>
|
|
{teams.slice(0, 3).map((team) => (
|
|
<Card key={team.id} variant="default" padding="md">
|
|
<Heading level={5} weight="bold">{team.name}</Heading>
|
|
<Text size="sm" variant="low" leading="snug" block mt={2}>{team.description}</Text>
|
|
</Card>
|
|
))}
|
|
</Stack>
|
|
|
|
{/* Races Column */}
|
|
<Stack direction="col" gap={6}>
|
|
<Stack direction="row" align="center" gap={2} px={2}>
|
|
<Flag className="w-4 h-4 text-[var(--ui-color-text-low)]" />
|
|
<Text size="sm" weight="bold" uppercase variant="low">Upcoming Races</Text>
|
|
</Stack>
|
|
{races.slice(0, 3).map((race) => (
|
|
<Card key={race.id} variant="default" padding="md">
|
|
<Stack direction="row" justify="between" align="start">
|
|
<Stack direction="col" gap={1}>
|
|
<Heading level={5} weight="bold">{race.track}</Heading>
|
|
<Text size="xs" variant="primary" weight="bold" uppercase>{race.car}</Text>
|
|
</Stack>
|
|
<Text size="xs" variant="low" mono>{race.formattedDate}</Text>
|
|
</Stack>
|
|
</Card>
|
|
))}
|
|
</Stack>
|
|
</FeatureGrid>
|
|
</Stack>
|
|
</Section>
|
|
);
|
|
}
|