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:35:36 +01:00
parent d30a725fe7
commit 977dcc4e86
7 changed files with 160 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
apps/website/components/teams/TeamCard.tsx
View File

@@ -2,7 +2,7 @@
import React from 'react';
import { ChevronRight, Users, Zap } from 'lucide-react';
import { Card } from '@/ui/Card';
import { ProfileCard } from '@/ui/ProfileCard';
import { CountryFlag } from '@/ui/CountryFlag';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
@@ -11,7 +11,6 @@ import { Text } from '@/ui/Text';
import { Badge } from '@/ui/Badge';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Box } from '@/ui/Box';
import { TeamSummaryData } from '@/lib/view-data/TeamsViewData';
interface TeamCardProps {
@@ -60,24 +59,10 @@ export function TeamCard({
};
return (
<Card
variant="precision"
padding="none"
<ProfileCard
variant="precision"
onClick={() => onClick?.(data.teamId)}
transition
fullHeight
position="relative"
>
{data.isRecruiting && (
<Box position="absolute" top={0} right={0} zIndex={10}>
<Badge variant="success" size="xs" rounded="none" style={{ borderBottomLeftRadius: '4px' }}>
RECRUITING
</Badge>
</Box>
)}
<Stack padding={6} gap={6} fullHeight>
{/* Header: Logo and Identity */}
identity={
<Stack direction="row" align="start" gap={4}>
<Logo
src={data.logoUrl}
@@ -91,63 +76,56 @@ export function TeamCard({
<Heading level={5} weight="bold" uppercase style={{ lineHeight: '1.2' }}>
{data.teamName}
</Heading>
<Stack direction="row" gap={3} wrap>
{data.performanceLevel && (
<Stack direction="row" align="center" gap={1}>
<Icon icon={Zap} size={3} intent="telemetry" />
<Text size="xs" variant="telemetry" mono uppercase>{data.performanceLevel}</Text>
</Stack>
)}
</Stack>
</Stack>
</Stack>
{/* Technical Stats Grid - Engineered Look */}
<Grid cols={3} gap="px" style={{ backgroundColor: 'var(--ui-color-border-muted)', border: '1px solid var(--ui-color-border-muted)' }}>
<Stack padding={3} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
<Text size="xs" variant="low" uppercase block mono>Rating</Text>
<Text size="md" weight="bold" mono variant="primary">{data.ratingLabel}</Text>
</Stack>
<Stack padding={3} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
<Text size="xs" variant="low" uppercase block mono>Wins</Text>
<Text size="md" weight="bold" mono variant="telemetry">{data.winsLabel}</Text>
</Stack>
<Stack padding={3} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
<Text size="xs" variant="low" uppercase block mono>Races</Text>
<Text size="md" weight="bold" mono variant="high">{data.racesLabel}</Text>
</Stack>
</Grid>
{data.description && (
<Text size="xs" variant="low" lineClamp={2} block leading="relaxed">
{data.description}
</Text>
)}
{/* Spacer to push footer down */}
<Box flex={1} />
{/* Footer: Metadata */}
<Stack direction="row" justify="between" paddingTop={4} style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}>
<Stack direction="row" gap={4}>
<Stack direction="row" align="center" gap={1.5}>
<Icon icon={Users} size={3} intent="low" />
<Text size="xs" variant="low" mono>{data.memberCount}</Text>
</Stack>
{data.countryCode && (
<Stack direction="row" align="center" gap={1.5}>
<CountryFlag countryCode={data.countryCode} size="sm" />
<Text size="xs" variant="low" mono uppercase>{data.countryCode}</Text>
{data.performanceLevel && (
<Stack direction="row" align="center" gap={1}>
<Icon icon={Zap} size={3} intent="telemetry" />
<Text size="xs" variant="telemetry" mono uppercase>{data.performanceLevel}</Text>
</Stack>
)}
</Stack>
<Stack direction="row" align="center" gap={1} style={{ color: 'var(--ui-color-intent-primary)' }}>
<Text size="xs" weight="bold" uppercase mono>Details</Text>
<Icon icon={ChevronRight} size={3} />
</Stack>
}
actions={
data.isRecruiting ? (
<Badge variant="success" size="xs">
RECRUITING
</Badge>
) : undefined
}
stats={
<Stack gap={4}>
<Grid cols={3} gap="px" style={{ backgroundColor: 'var(--ui-color-border-muted)', border: '1px solid var(--ui-color-border-muted)', borderRadius: 'var(--ui-radius-md)', overflow: 'hidden' }}>
<Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
<Text size="xs" variant="low" uppercase block mono>Rating</Text>
<Text size="sm" weight="bold" mono variant="primary">{data.ratingLabel}</Text>
</Stack>
<Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
<Text size="xs" variant="low" uppercase block mono>Wins</Text>
<Text size="sm" weight="bold" mono variant="telemetry">{data.winsLabel}</Text>
</Stack>
<Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
<Text size="xs" variant="low" uppercase block mono>Races</Text>
<Text size="sm" weight="bold" mono variant="high">{data.racesLabel}</Text>
</Stack>
</Grid>
<Stack direction="row" justify="between" align="center">
<Stack direction="row" gap={4}>
<Stack direction="row" align="center" gap={1.5}>
<Icon icon={Users} size={3} intent="low" />
<Text size="xs" variant="low" mono>{data.memberCount}</Text>
</Stack>
{data.countryCode && (
<Stack direction="row" align="center" gap={1.5}>
<CountryFlag countryCode={data.countryCode} size="sm" />
<Text size="xs" variant="low" mono uppercase>{data.countryCode}</Text>
</Stack>
)}
</Stack>
<Icon icon={ChevronRight} size={3} intent="primary" />
</Stack>
</Stack>
</Stack>
</Card>
}
/>
);
}