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-19 18:01:30 +01:00
parent 6154d54435
commit 61b5cf3b64
120 changed files with 2226 additions and 2021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/website/components/drivers/DriverEntryRow.tsx
View File

@@ -30,17 +30,17 @@ export function DriverEntryRow({
return (
<Stack
onClick={onClick}
display="flex"
alignItems="center"
direction="row"
align="center"
gap={3}
p={3}
rounded="xl"
cursor="pointer"
transition
bg={isCurrentUser ? 'bg-primary-blue/10' : 'transparent'}
bg={isCurrentUser ? 'rgba(25, 140, 255, 0.1)' : 'transparent'}
border
borderColor={isCurrentUser ? 'border-primary-blue/30' : 'transparent'}
hoverBorderColor={isCurrentUser ? 'primary-blue/40' : 'charcoal-outline/20'}
borderColor={isCurrentUser ? 'rgba(25, 140, 255, 0.3)' : 'transparent'}
hoverBorderColor={isCurrentUser ? 'rgba(25, 140, 255, 0.4)' : 'var(--ui-color-border-low)'}
>
<Stack
display="flex"
@@ -49,9 +49,10 @@ export function DriverEntryRow({
w="8"
h="8"
rounded="lg"
bg="bg-iron-gray"
color="text-gray-500"
style={{ fontWeight: 'bold', fontSize: '0.875rem' }}
bg="var(--ui-color-bg-surface-muted)"
color="var(--ui-color-text-low)"
weight="bold"
fontSize="0.875rem"
>
{index + 1}
</Stack>
@@ -63,7 +64,7 @@ export function DriverEntryRow({
rounded="full"
overflow="hidden"
border={isCurrentUser}
borderColor={isCurrentUser ? 'border-primary-blue' : ''}
borderColor={isCurrentUser ? 'var(--ui-color-intent-primary)' : ''}
>
<Image
src={avatarUrl}
@@ -81,11 +82,11 @@ export function DriverEntryRow({
w="5"
h="5"
rounded="full"
bg="bg-deep-graphite"
bg="var(--ui-color-bg-base)"
display="flex"
alignItems="center"
justifyContent="center"
style={{ fontSize: '0.625rem' }}
fontSize="0.625rem"
>
{CountryFlagDisplay.fromCountryCode(country).toString()}
</Stack>
@@ -96,14 +97,14 @@ export function DriverEntryRow({
<Text
weight="semibold"
size="sm"
color={isCurrentUser ? 'text-primary-blue' : 'text-white'}
variant={isCurrentUser ? 'primary' : 'high'}
truncate
>
{name}
</Text>
{isCurrentUser && <Badge variant="primary">You</Badge>}
</Stack>
<Text size="xs" color="text-gray-500">{country}</Text>
<Text size="xs" variant="low">{country}</Text>
</Stack>
{rating != null && (

22
apps/website/components/drivers/DriverHeaderPanel.tsx
View File

@@ -29,10 +29,10 @@ export function DriverHeaderPanel({
return (
<Stack
bg="bg-panel-gray"
bg="var(--ui-color-bg-surface)"
rounded="xl"
border
borderColor="border-charcoal-outline"
borderColor="var(--ui-color-border-low)"
overflow="hidden"
position="relative"
>
@@ -43,12 +43,12 @@ export function DriverHeaderPanel({
left={0}
right={0}
height="24"
bg="bg-gradient-to-r from-primary-blue/20 to-transparent"
bg="linear-gradient(to right, rgba(25, 140, 255, 0.2), transparent)"
opacity={0.5}
/>
<Stack p={6} position="relative">
<Stack direction={{ base: 'col', md: 'row' }} gap={6} align="start" className="md:items-center">
<Stack direction={{ base: 'col', md: 'row' }} gap={6} align={{ base: 'start', md: 'center' }}>
{/* Avatar */}
<Stack
width="32"
@@ -56,8 +56,8 @@ export function DriverHeaderPanel({
rounded="2xl"
overflow="hidden"
border
borderColor="border-charcoal-outline"
bg="bg-graphite-black"
borderColor="var(--ui-color-border-low)"
bg="var(--ui-color-bg-base)"
flexShrink={0}
>
<Image
@@ -72,25 +72,25 @@ export function DriverHeaderPanel({
<Stack flexGrow={1}>
<Stack gap={2}>
<Stack direction="row" align="center" gap={3} wrap>
<Text as="h1" size="3xl" weight="bold" color="text-white">
<Text as="h1" size="3xl" weight="bold" variant="high">
{name}
</Text>
<RatingBadge rating={rating} ratingLabel={ratingLabel} size="lg" />
</Stack>
<Stack direction="row" align="center" gap={4} wrap>
<Text size="sm" color="text-gray-400">
<Text size="sm" variant="low">
{nationality}
</Text>
{globalRankLabel && (
<Text size="sm" color="text-gray-400">
Global Rank: <Text color="text-warning-amber" weight="semibold">{globalRankLabel}</Text>
<Text size="sm" variant="low">
Global Rank: <Text variant="warning" weight="semibold">{globalRankLabel}</Text>
</Text>
)}
</Stack>
{bio && (
<Text size="sm" color="text-gray-400" className="max-w-2xl mt-2" lineClamp={2}>
<Text size="sm" variant="low" maxWidth="2xl" mt={2} lineClamp={2}>
{bio}
</Text>
)}

6
apps/website/components/drivers/DriverSearchBar.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Input } from '@/ui/Input';
import { Search } from 'lucide-react';
@@ -11,13 +11,13 @@ interface DriverSearchBarProps {
export function DriverSearchBar({ query, onChange }: DriverSearchBarProps) {
return (
<Box position="relative" group>
<Group fullWidth>
<Input
value={query}
onChange={(e) => onChange(e.target.value)}
placeholder="Search drivers by name or nationality..."
icon={<Search size={20} />}
/>
</Box>
</Group>
);
}

14
apps/website/components/drivers/DriverTable.tsx
View File

@@ -2,7 +2,7 @@
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Group } from '@/ui/Group';
import { Table, TableHead, TableBody, TableRow, TableHeaderCell } from '@/ui/Table';
import { TrendingUp } from 'lucide-react';
import { Card } from '@/ui/Card';
@@ -15,16 +15,16 @@ interface DriverTableProps {
export function DriverTable({ children }: DriverTableProps) {
return (
<Stack gap={4}>
<Stack direction="row" align="center" gap={3}>
<Group direction="column" gap={4} fullWidth>
<Group direction="row" align="center" gap={3}>
<Card variant="dark">
<Icon icon={TrendingUp} size={5} intent="primary" />
</Card>
<Stack>
<Group direction="column">
<Heading level={2}>Driver Rankings</Heading>
<Text size="xs" variant="low">Top performers by skill rating</Text>
</Stack>
</Stack>
</Group>
</Group>
<Table>
<TableHead>
@@ -40,6 +40,6 @@ export function DriverTable({ children }: DriverTableProps) {
{children}
</TableBody>
</Table>
</Stack>
</Group>
);
}

7
apps/website/components/drivers/DriverTableRow.tsx
View File

@@ -1,9 +1,8 @@
'use client';
import { RatingBadge } from '@/components/drivers/RatingBadge';
import { Image } from '@/ui/Image';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Group } from '@/ui/Group';
import { TableRow, TableCell } from '@/ui/Table';
import { Avatar } from '@/ui/Avatar';
@@ -41,7 +40,7 @@ export function DriverTableRow({
</Text>
</TableCell>
<TableCell>
<Stack direction="row" align="center" gap={3}>
<Group direction="row" align="center" gap={3}>
<Avatar
src={avatarUrl || undefined}
alt={name}
@@ -54,7 +53,7 @@ export function DriverTableRow({
>
{name}
</Text>
</Stack>
</Group>
</TableCell>
<TableCell>
<Text size="xs" variant="low">{nationality}</Text>

28
apps/website/components/drivers/DriversDirectoryHeader.tsx
View File

@@ -2,7 +2,7 @@
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Group } from '@/ui/Group';
import { Text } from '@/ui/Text';
import { Section } from '@/ui/Section';
import { Container } from '@/ui/Container';
@@ -41,31 +41,31 @@ export function DriversDirectoryHeader({
return (
<Section variant="dark" padding="md">
<Container>
<Stack direction="row" align="center" justify="between" gap={8}>
<Stack gap={6}>
<Stack direction="row" align="center" gap={3}>
<Group direction="row" align="center" justify="between" gap={8} fullWidth>
<Group direction="column" gap={6}>
<Group direction="row" align="center" gap={3}>
<Card variant="dark">
<Icon icon={Users} size={6} intent="primary" />
</Card>
<Heading level={1}>Drivers</Heading>
</Stack>
</Group>
<Text size="lg" variant="low">
Meet the racers who make every lap count. From rookies to champions, track their journey and see who&apos;s dominating the grid.
Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid.
</Text>
<Stack direction="row" gap={6} wrap>
<Group direction="row" gap={6} wrap>
{stats.map((stat, index) => (
<Stack key={index} direction="row" align="center" gap={2}>
<Group key={index} direction="row" align="center" gap={2}>
<Text size="sm" variant="low">
<Text as="span" weight="semibold" variant="high">{stat.value}</Text> {stat.label}
</Text>
</Stack>
</Group>
))}
</Stack>
</Stack>
</Group>
</Group>
<Stack gap={2} align="center">
<Group direction="column" gap={2} align="center">
<Button
variant="primary"
onClick={onViewLeaderboard}
@@ -76,8 +76,8 @@ export function DriversDirectoryHeader({
<Text size="xs" variant="low" align="center">
See full driver rankings
</Text>
</Stack>
</Stack>
</Group>
</Group>
</Container>
</Section>
);

6
apps/website/components/drivers/LiveryCard.tsx
View File

@@ -25,10 +25,10 @@ interface LiveryCardProps {
export function LiveryCard({ livery, onEdit, onDownload, onDelete }: LiveryCardProps) {
return (
<Card className="overflow-hidden hover:border-primary-blue/50 transition-colors">
<Card overflow="hidden" hoverBorderColor="var(--ui-color-intent-primary)" transition="all 0.3s ease">
{/* Livery Preview */}
<Stack height={48} backgroundColor="deep-graphite" rounded="lg" mb={4} display="flex" center border borderColor="charcoal-outline">
<Icon icon={Car} size={16} color="text-gray-600" />
<Stack height={48} bg="var(--ui-color-bg-base)" rounded="lg" mb={4} display="flex" center border borderColor="var(--ui-color-border-low)">
<Icon icon={Car} size={16} intent="low" />
</Stack>
{/* Livery Info */}

34
apps/website/components/drivers/PerformanceOverview.tsx
View File

@@ -27,7 +27,7 @@ export function PerformanceOverview({ stats }: PerformanceOverviewProps) {
return (
<Card>
<Stack mb={6}>
<Heading level={2} icon={<Icon icon={Activity} size={5} color="#00f2ff" />}>
<Heading level={2} icon={<Icon icon={Activity} size={5} intent="telemetry" />}>
Performance Overview
</Heading>
</Stack>
@@ -39,13 +39,13 @@ export function PerformanceOverview({ stats }: PerformanceOverviewProps) {
value={stats.wins}
max={stats.totalRaces}
label="Win Rate"
color="#10b981"
color="var(--ui-color-intent-success)"
/>
<CircularProgress
value={stats.podiums}
max={stats.totalRaces}
label="Podium Rate"
color="#f59e0b"
color="var(--ui-color-intent-warning)"
/>
</Stack>
<Stack direction="row" gap={6}>
@@ -53,13 +53,13 @@ export function PerformanceOverview({ stats }: PerformanceOverviewProps) {
value={stats.consistency ?? 0}
max={100}
label="Consistency"
color="#3b82f6"
color="var(--ui-color-intent-primary)"
/>
<CircularProgress
value={stats.totalRaces - stats.dnfs}
max={stats.totalRaces}
label="Finish Rate"
color="#00f2ff"
color="var(--ui-color-intent-telemetry)"
/>
</Stack>
</Stack>
@@ -67,37 +67,37 @@ export function PerformanceOverview({ stats }: PerformanceOverviewProps) {
<GridItem colSpan={12} lgSpan={6}>
<Stack mb={4}>
<Heading level={3} icon={<Icon icon={BarChart3} size={4} color="#9ca3af" />}>
<Heading level={3} icon={<Icon icon={BarChart3} size={4} intent="low" />}>
Results Breakdown
</Heading>
</Stack>
<HorizontalBarChart
data={[
{ label: 'Wins', value: stats.wins, color: 'bg-performance-green' },
{ label: 'Podiums (2nd-3rd)', value: stats.podiums - stats.wins, color: 'bg-warning-amber' },
{ label: 'DNFs', value: stats.dnfs, color: 'bg-red-500' },
{ label: 'Wins', value: stats.wins, color: 'var(--ui-color-intent-success)' },
{ label: 'Podiums (2nd-3rd)', value: stats.podiums - stats.wins, color: 'var(--ui-color-intent-warning)' },
{ label: 'DNFs', value: stats.dnfs, color: 'var(--ui-color-intent-critical)' },
]}
maxValue={stats.totalRaces}
/>
<Stack mt={6}>
<Grid cols={2} gap={4}>
<Stack p={4} style={{ backgroundColor: '#0f1115', borderRadius: '0.75rem', border: '1px solid #262626' }}>
<Stack p={4} bg="var(--ui-color-bg-base)" rounded="xl" border borderColor="var(--ui-color-border-low)">
<Stack gap={2}>
<Stack direction="row" align="center" gap={2}>
<Icon icon={TrendingUp} size={4} color="#10b981" />
<Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase' }}>Best Finish</Text>
<Icon icon={TrendingUp} size={4} intent="success" />
<Text size="xs" variant="low" uppercase>Best Finish</Text>
</Stack>
<Text size="2xl" weight="bold" color="text-performance-green">P{stats.bestFinish}</Text>
<Text size="2xl" weight="bold" variant="success">P{stats.bestFinish}</Text>
</Stack>
</Stack>
<Stack p={4} style={{ backgroundColor: '#0f1115', borderRadius: '0.75rem', border: '1px solid #262626' }}>
<Stack p={4} bg="var(--ui-color-bg-base)" rounded="xl" border borderColor="var(--ui-color-border-low)">
<Stack gap={2}>
<Stack direction="row" align="center" gap={2}>
<Icon icon={Target} size={4} color="#3b82f6" />
<Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase' }}>Avg Finish</Text>
<Icon icon={Target} size={4} intent="primary" />
<Text size="xs" variant="low" uppercase>Avg Finish</Text>
</Stack>
<Text size="2xl" weight="bold" color="text-primary-blue">
<Text size="2xl" weight="bold" variant="primary">
P{(stats.avgFinish ?? 0).toFixed(1)}
</Text>
</Stack>

70
apps/website/components/drivers/ProfileHero.tsx
View File

@@ -9,6 +9,8 @@ import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Calendar, Clock, ExternalLink, Globe, Star, Trophy, UserPlus } from 'lucide-react';
interface ProfileHeroProps {
@@ -54,25 +56,40 @@ export function ProfileHero({
friendRequestSent,
}: ProfileHeroProps) {
return (
<Surface variant="muted" rounded="2xl" border padding={6} style={{ background: 'linear-gradient(to bottom right, rgba(38, 38, 38, 0.8), rgba(38, 38, 38, 0.6), #0f1115)', borderColor: '#262626' }}>
<Surface
variant="muted"
rounded="2xl"
border
padding={6}
bg="linear-gradient(to bottom right, rgba(38, 38, 38, 0.8), rgba(38, 38, 38, 0.6), var(--ui-color-bg-base))"
borderColor="var(--ui-color-border-low)"
>
<Stack direction="row" align="start" gap={6} wrap>
{/* Avatar */}
<Stack style={{ position: 'relative' }}>
<Stack style={{ width: '7rem', height: '7rem', borderRadius: '1rem', background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)', padding: '0.25rem', boxShadow: '0 20px 25px -5px rgba(59, 130, 246, 0.2)' }}>
<Stack style={{ width: '100%', height: '100%', borderRadius: '0.75rem', overflow: 'hidden', backgroundColor: '#262626' }}>
<Box position="relative">
<Stack
w="28"
h="28"
rounded="xl"
bg="linear-gradient(to bottom right, var(--ui-color-intent-primary), rgba(147, 51, 234, 1))"
padding={1}
shadow="xl"
>
<Stack fullWidth fullHeight rounded="lg" overflow="hidden" bg="var(--ui-color-bg-surface-muted)">
<Image
src={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
alt={driver.name}
width={144}
height={144}
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
objectFit="cover"
fill
/>
</Stack>
</Stack>
</Stack>
</Box>
{/* Driver Info */}
<Stack style={{ flex: 1, minWidth: 0 }}>
<Stack flex={1} minWidth="0">
<Stack direction="row" align="center" gap={3} wrap mb={2}>
<Heading level={1}>{driver.name}</Heading>
<Text size="4xl" aria-label={`Country: ${driver.country}`}>
@@ -84,18 +101,18 @@ export function ProfileHero({
<Stack direction="row" align="center" gap={4} wrap mb={4}>
{stats && (
<>
<Surface variant="muted" rounded="lg" padding={1} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)', border: '1px solid rgba(59, 130, 246, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
<Surface variant="muted" rounded="lg" padding={1} bg="rgba(25, 140, 255, 0.1)" border borderColor="rgba(25, 140, 255, 0.3)" px={3}>
<Stack direction="row" align="center" gap={2}>
<Star style={{ width: '1rem', height: '1rem', color: '#3b82f6' }} />
<Text font="mono" weight="bold" color="text-primary-blue">{stats.ratingLabel}</Text>
<Text size="xs" color="text-gray-400">Rating</Text>
<Icon icon={Star} size={4} intent="primary" />
<Text font="mono" weight="bold" variant="primary">{stats.ratingLabel}</Text>
<Text size="xs" variant="low">Rating</Text>
</Stack>
</Surface>
<Surface variant="muted" rounded="lg" padding={1} style={{ backgroundColor: 'rgba(250, 204, 21, 0.1)', border: '1px solid rgba(250, 204, 21, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
<Surface variant="muted" rounded="lg" padding={1} bg="rgba(250, 204, 21, 0.1)" border borderColor="rgba(250, 204, 21, 0.3)" px={3}>
<Stack direction="row" align="center" gap={2}>
<Trophy style={{ width: '1rem', height: '1rem', color: '#facc15' }} />
<Text font="mono" weight="bold" style={{ color: '#facc15' }}>{globalRankLabel}</Text>
<Text size="xs" color="text-gray-400">Global</Text>
<Icon icon={Trophy} size={4} intent="warning" />
<Text font="mono" weight="bold" color="rgba(250, 204, 21, 1)">{globalRankLabel}</Text>
<Text size="xs" variant="low">Global</Text>
</Stack>
</Surface>
</>
@@ -103,19 +120,19 @@ export function ProfileHero({
</Stack>
{/* Meta info */}
<Stack direction="row" align="center" gap={4} wrap style={{ fontSize: '0.875rem', color: '#9ca3af' }}>
<Stack direction="row" align="center" gap={4} wrap color="var(--ui-color-text-low)">
<Stack direction="row" align="center" gap={1.5}>
<Globe style={{ width: '1rem', height: '1rem' }} />
<Icon icon={Globe} size={4} />
<Text size="sm">iRacing: {driver.iracingId}</Text>
</Stack>
<Stack direction="row" align="center" gap={1.5}>
<Calendar style={{ width: '1rem', height: '1rem' }} />
<Icon icon={Calendar} size={4} />
<Text size="sm">
Joined {driver.joinedAtLabel}
</Text>
</Stack>
<Stack direction="row" align="center" gap={1.5}>
<Clock style={{ width: '1rem', height: '1rem' }} />
<Icon icon={Clock} size={4} />
<Text size="sm">{timezone}</Text>
</Stack>
</Stack>
@@ -127,7 +144,7 @@ export function ProfileHero({
variant="primary"
onClick={onAddFriend}
disabled={friendRequestSent}
icon={<UserPlus style={{ width: '1rem', height: '1rem' }} />}
icon={<Icon icon={UserPlus} size={4} />}
>
{friendRequestSent ? 'Request Sent' : 'Add Friend'}
</Button>
@@ -136,23 +153,22 @@ export function ProfileHero({
{/* Social Handles */}
{socialHandles.length > 0 && (
<Stack mt={6} pt={6} style={{ borderTop: '1px solid rgba(38, 38, 38, 0.5)' }}>
<Stack mt={6} pt={6} borderTop borderColor="rgba(255, 255, 255, 0.05)">
<Stack direction="row" align="center" gap={2} wrap>
<Text size="sm" color="text-gray-500" style={{ marginRight: '0.5rem' }}>Connect:</Text>
<Text size="sm" variant="low" mr={2}>Connect:</Text>
{socialHandles.map((social) => {
const Icon = getSocialIcon(social.platform);
const SocialIcon = getSocialIcon(social.platform);
return (
<Stack key={social.platform}>
<Link
href={social.url}
target="_blank"
rel="noopener noreferrer"
variant="ghost"
>
<Surface variant="muted" rounded="lg" padding={1} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', paddingLeft: '0.75rem', paddingRight: '0.75rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', border: '1px solid #262626', color: '#9ca3af' }}>
<Icon style={{ width: '1rem', height: '1rem' }} />
<Surface variant="muted" rounded="lg" padding={1} display="flex" alignItems="center" gap={2} px={3} bg="rgba(255, 255, 255, 0.05)" border borderColor="var(--ui-color-border-low)" color="var(--ui-color-text-low)">
<Icon icon={SocialIcon} size={4} />
<Text size="sm">{social.handle}</Text>
<ExternalLink style={{ width: '0.75rem', height: '0.75rem', opacity: 0.5 }} />
<Icon icon={ExternalLink} size={3} opacity={0.5} />
</Surface>
</Link>
</Stack>

36
apps/website/components/drivers/SkillDistribution.tsx
View File

@@ -7,10 +7,10 @@ import { Text } from '@/ui/Text';
import { BarChart3 } from 'lucide-react';
const SKILL_LEVELS = [
{ id: 'pro', label: 'Pro', icon: BarChart3, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
{ id: 'advanced', label: 'Advanced', icon: BarChart3, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
{ id: 'intermediate', label: 'Intermediate', icon: BarChart3, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
{ id: 'beginner', label: 'Beginner', icon: BarChart3, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
{ id: 'pro', label: 'Pro', icon: BarChart3, color: 'var(--ui-color-intent-warning)', bgColor: 'rgba(255, 190, 77, 0.1)', borderColor: 'rgba(255, 190, 77, 0.3)' },
{ id: 'advanced', label: 'Advanced', icon: BarChart3, color: 'rgba(147, 51, 234, 1)', bgColor: 'rgba(147, 51, 234, 0.1)', borderColor: 'rgba(147, 51, 234, 0.3)' },
{ id: 'intermediate', label: 'Intermediate', icon: BarChart3, color: 'var(--ui-color-intent-primary)', bgColor: 'rgba(25, 140, 255, 0.1)', borderColor: 'rgba(25, 140, 255, 0.3)' },
{ id: 'beginner', label: 'Beginner', icon: BarChart3, color: 'var(--ui-color-intent-success)', bgColor: 'rgba(16, 185, 129, 0.1)', borderColor: 'rgba(16, 185, 129, 0.3)' },
];
interface SkillDistributionProps {
@@ -38,15 +38,15 @@ export function SkillDistribution({ drivers }: SkillDistributionProps) {
alignItems="center"
justifyContent="center"
rounded="xl"
bg="bg-neon-aqua/10"
bg="rgba(78, 212, 224, 0.1)"
border
borderColor="border-neon-aqua/20"
borderColor="rgba(78, 212, 224, 0.2)"
>
<Icon icon={BarChart3} size={5} color="var(--neon-aqua)" />
<Icon icon={BarChart3} size={5} intent="telemetry" />
</Box>
<Box>
<Heading level={2}>Skill Distribution</Heading>
<Text size="xs" color="text-gray-500">Driver population by skill level</Text>
<Text size="xs" variant="low">Driver population by skill level</Text>
</Box>
</Box>
@@ -58,28 +58,24 @@ export function SkillDistribution({ drivers }: SkillDistributionProps) {
p={4}
rounded="xl"
border
className={`${level.bgColor} ${level.borderColor}`}
bg={level.bgColor}
borderColor={level.borderColor}
>
<Box display="flex" alignItems="center" justifyContent="between" mb={3}>
<Icon icon={level.icon} size={5} className={level.color} />
<Text size="2xl" weight="bold" className={level.color}>{level.count}</Text>
<Icon icon={level.icon} size={5} color={level.color} />
<Text size="2xl" weight="bold" color={level.color}>{level.count}</Text>
</Box>
<Text color="text-white" weight="medium" block mb={1}>{level.label}</Text>
<Box fullWidth h="2" rounded="full" bg="bg-deep-graphite/50" overflow="hidden">
<Text variant="high" weight="medium" block mb={1}>{level.label}</Text>
<Box fullWidth h="2" rounded="full" bg="var(--ui-color-bg-base)" overflow="hidden">
<Box
h="full"
rounded="full"
transition
className={
level.id === 'pro' ? 'bg-yellow-400' :
level.id === 'advanced' ? 'bg-purple-400' :
level.id === 'intermediate' ? 'bg-primary-blue' :
'bg-green-400'
}
bg={level.color}
style={{ width: `${level.percentage}%` }}
/>
</Box>
<Text size="xs" color="text-gray-500" block mt={1}>{level.percentage}% of drivers</Text>
<Text size="xs" variant="low" block mt={1}>{level.percentage}% of drivers</Text>
</Box>
);
})}