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-20 15:12:28 +01:00
parent a972bb4195
commit 94aaaff704
25 changed files with 793 additions and 574 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/website/client-wrapper/TeamsPageClient.tsx
View File

@@ -1,6 +1,6 @@
'use client'; 'use client';
import React from 'react'; import React, { useState } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { TeamsTemplate } from '@/templates/TeamsTemplate'; import { TeamsTemplate } from '@/templates/TeamsTemplate';
import type { TeamsViewData } from '@/lib/view-data/TeamsViewData'; import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
@@ -12,6 +12,7 @@ interface TeamsPageClientProps {
export function TeamsPageClient({ viewData }: TeamsPageClientProps) { export function TeamsPageClient({ viewData }: TeamsPageClientProps) {
const router = useRouter(); const router = useRouter();
const [searchQuery, setSearchQuery] = useState('');
const handleTeamClick = (teamId: string) => { const handleTeamClick = (teamId: string) => {
router.push(`/teams/${teamId}`); router.push(`/teams/${teamId}`);
@@ -28,6 +29,8 @@ export function TeamsPageClient({ viewData }: TeamsPageClientProps) {
return ( return (
<TeamsTemplate <TeamsTemplate
viewData={viewData} viewData={viewData}
searchQuery={searchQuery}
onSearchChange={setSearchQuery}
onTeamClick={handleTeamClick} onTeamClick={handleTeamClick}
onViewFullLeaderboard={handleViewFullLeaderboard} onViewFullLeaderboard={handleViewFullLeaderboard}
onCreateTeam={handleCreateTeam} onCreateTeam={handleCreateTeam}

56
apps/website/components/teams/TeamAdmin.tsx
View File

@@ -15,9 +15,7 @@ import { DangerZone } from '@/ui/DangerZone';
import { Input } from '@/ui/Input'; import { Input } from '@/ui/Input';
import { Text } from '@/ui/Text'; import { Text } from '@/ui/Text';
import { TextArea } from '@/ui/TextArea'; import { TextArea } from '@/ui/TextArea';
import { SectionHeader } from '@/ui/SectionHeader';
import { Box } from '@/ui/Box'; import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack'; import { Stack } from '@/ui/Stack';
import React, { useState } from 'react'; import React, { useState } from 'react';
@@ -40,14 +38,12 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
description: team.description || '', description: team.description || '',
}); });
// Use hooks for data fetching
const { data: joinRequests = [], isLoading: loading } = useTeamJoinRequests( const { data: joinRequests = [], isLoading: loading } = useTeamJoinRequests(
team.id, team.id,
team.ownerId, team.ownerId,
true true
); );
// Use hooks for mutations
const updateTeamMutation = useUpdateTeam({ const updateTeamMutation = useUpdateTeam({
onSuccess: () => { onSuccess: () => {
setEditMode(false); setEditMode(false);
@@ -96,17 +92,22 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
}; };
return ( return (
<Stack gap={6}> <Stack gap="lg">
<Panel <Panel
title="Team Settings" variant="default"
actions={!editMode && ( padding="md"
<Button variant="secondary" size="sm" onClick={() => setEditMode(true)}>
Edit Details
</Button>
)}
> >
<Box display="flex" justifyContent="between" alignItems="center" marginBottom={6}>
<Heading level={3} uppercase>Team Settings</Heading>
{!editMode && (
<Button variant="secondary" size="sm" onClick={() => setEditMode(true)}>
Edit Details
</Button>
)}
</Box>
{editMode ? ( {editMode ? (
<Stack gap={4}> <Stack gap="md">
<Input <Input
label="Team Name" label="Team Name"
value={editedTeam.name} value={editedTeam.name}
@@ -128,7 +129,7 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
onChange={(e) => setEditedTeam({ ...editedTeam, description: e.target.value })} onChange={(e) => setEditedTeam({ ...editedTeam, description: e.target.value })}
/> />
<Group gap={2}> <Box display="flex" gap="sm">
<Button variant="primary" onClick={handleSaveChanges} disabled={updateTeamMutation.isPending}> <Button variant="primary" onClick={handleSaveChanges} disabled={updateTeamMutation.isPending}>
{updateTeamMutation.isPending ? 'Saving...' : 'Save Changes'} {updateTeamMutation.isPending ? 'Saving...' : 'Save Changes'}
</Button> </Button>
@@ -145,27 +146,30 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
> >
Cancel Cancel
</Button> </Button>
</Group> </Box>
</Stack> </Stack>
) : ( ) : (
<Stack gap={4}> <Stack gap="md">
<Stack gap={1}> <Stack gap="xs">
<Text size="sm" variant="low" block>Team Name</Text> <Text size="xs" variant="low" uppercase>Team Name</Text>
<Text variant="high" weight="medium" block>{team.name}</Text> <Text weight="bold">{team.name}</Text>
</Stack> </Stack>
<Stack gap={1}> <Stack gap="xs">
<Text size="sm" variant="low" block>Team Tag</Text> <Text size="xs" variant="low" uppercase>Team Tag</Text>
<Text variant="high" weight="medium" block>{team.tag}</Text> <Text weight="bold">{team.tag}</Text>
</Stack> </Stack>
<Stack gap={1}> <Stack gap="xs">
<Text size="sm" variant="low" block>Description</Text> <Text size="xs" variant="low" uppercase>Description</Text>
<Text variant="high" block>{team.description}</Text> <Text variant="med">{team.description}</Text>
</Stack> </Stack>
</Stack> </Stack>
)} )}
</Panel> </Panel>
<Panel title="Join Requests"> <Panel variant="default" padding="md">
<Box marginBottom={6}>
<Heading level={3} uppercase>Join Requests</Heading>
</Box>
{loading ? ( {loading ? (
<LoadingWrapper variant="spinner" message="Loading requests..." /> <LoadingWrapper variant="spinner" message="Loading requests..." />
) : joinRequests.length > 0 ? ( ) : joinRequests.length > 0 ? (
@@ -202,3 +206,5 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
</Stack> </Stack>
); );
} }
import { Heading } from '@/ui/Heading';

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

@@ -1,56 +1,71 @@
'use client'; 'use client';
import { TeamLogo } from '@/components/teams/TeamLogo'; import React from 'react';
import { TeamCard as UITeamCard } from '@/ui/TeamCard'; import { TeamCard as UiTeamCard } from '@/ui/TeamCard';
import React, { ReactNode } from 'react'; import { TeamSummaryData } from '@/lib/view-data/TeamsViewData';
import { Image } from '@/ui/Image';
interface TeamCardProps { interface TeamCardProps {
name: string; team?: TeamSummaryData;
description?: string; // Compatibility props
name?: string;
leagueName?: string;
logo?: string; logo?: string;
memberCount: number; memberCount?: number;
isRecruiting?: boolean; ratingLabel?: string;
performanceBadge?: ReactNode; winsLabel?: string;
specializationContent?: ReactNode; racesLabel?: string;
categoryBadge?: ReactNode;
region?: string; region?: string;
languagesContent?: ReactNode; isRecruiting?: boolean;
statsContent?: ReactNode; performanceLevel?: string;
onClick?: () => void; description?: string;
onClick?: (id: string) => void;
} }
export function TeamCard({ export function TeamCard({
team,
name, name,
description, leagueName,
logo, logo,
memberCount, memberCount,
isRecruiting, ratingLabel,
performanceBadge, winsLabel,
specializationContent, racesLabel,
categoryBadge,
region, region,
languagesContent, isRecruiting,
onClick, performanceLevel,
description,
onClick
}: TeamCardProps) { }: TeamCardProps) {
const data = team || {
teamId: '',
teamName: name || '',
leagueName: leagueName || '',
memberCount: memberCount || 0,
logoUrl: logo,
ratingLabel: ratingLabel || '-',
winsLabel: winsLabel || '-',
racesLabel: racesLabel || '-',
region: region,
isRecruiting: isRecruiting || false,
performanceLevel: performanceLevel,
description: description,
};
return ( return (
<UITeamCard <UiTeamCard
name={name} name={data.teamName}
description={description} leagueName={data.leagueName}
memberCount={memberCount} logo={data.logoUrl ? <Image src={data.logoUrl} alt={data.teamName} fullWidth fullHeight objectFit="cover" /> : undefined}
isRecruiting={isRecruiting} memberCount={data.memberCount}
region={region} rating={data.ratingLabel}
onClick={onClick} wins={data.winsLabel}
logo={ races={data.racesLabel}
<TeamLogo src={logo} alt={name} size={64} /> region={data.region}
} isRecruiting={data.isRecruiting}
badges={ performanceLevel={data.performanceLevel}
<> description={data.description}
{performanceBadge} onClick={() => onClick?.(data.teamId)}
{specializationContent}
{categoryBadge}
{languagesContent}
</>
}
/> />
); );
} }

69
apps/website/components/teams/TeamCardWrapper.tsx
View File

@@ -4,11 +4,9 @@ import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon'; import { Icon } from '@/ui/Icon';
import { Group } from '@/ui/Group'; import { Group } from '@/ui/Group';
import { Text } from '@/ui/Text'; import { Text } from '@/ui/Text';
import { BadgeGroup } from '@/ui/BadgeGroup';
import { import {
Clock, Clock,
Crown, Crown,
Languages,
Shield, Shield,
Star, Star,
TrendingUp, TrendingUp,
@@ -34,35 +32,8 @@ interface TeamCardProps {
onClick?: () => void; onClick?: () => void;
} }
function getPerformanceBadge(level?: string) {
switch (level) {
case 'pro':
return { icon: Crown, label: 'Pro', variant: 'warning' as const };
case 'advanced':
return { icon: Star, label: 'Advanced', variant: 'primary' as const };
case 'intermediate':
return { icon: TrendingUp, label: 'Intermediate', variant: 'default' as const };
case 'beginner':
return { icon: Shield, label: 'Beginner', variant: 'success' as const };
default:
return null;
}
}
function getSpecializationBadge(specialization?: string) {
switch (specialization) {
case 'endurance':
return { icon: Clock, label: 'Endurance', intent: 'warning' as const };
case 'sprint':
return { icon: Zap, label: 'Sprint', intent: 'telemetry' as const };
default:
return null;
}
}
export function TeamCard({ export function TeamCard({
name, name,
description,
logo, logo,
memberCount, memberCount,
ratingLabel, ratingLabel,
@@ -70,53 +41,21 @@ export function TeamCard({
racesLabel, racesLabel,
performanceLevel, performanceLevel,
isRecruiting, isRecruiting,
specialization,
region, region,
languages,
category,
onClick, onClick,
}: TeamCardProps) { }: TeamCardProps) {
const performanceBadge = getPerformanceBadge(performanceLevel);
const specializationBadge = getSpecializationBadge(specialization);
return ( return (
<UiTeamCard <UiTeamCard
name={name} name={name}
description={description}
logo={logo} logo={logo}
memberCount={memberCount} memberCount={memberCount}
ratingLabel={ratingLabel}
winsLabel={winsLabel}
racesLabel={racesLabel}
isRecruiting={isRecruiting} isRecruiting={isRecruiting}
onClick={onClick} onClick={onClick}
region={region} region={region}
performanceBadge={performanceBadge && ( performanceLevel={performanceLevel}
<Badge variant={performanceBadge.variant} icon={performanceBadge.icon}>
{performanceBadge.label}
</Badge>
)}
specializationContent={specializationBadge && (
<Group gap={1}>
<Icon icon={specializationBadge.icon} size={3} intent={specializationBadge.intent} />
<Text size="xs" variant="low">{specializationBadge.label}</Text>
</Group>
)}
categoryBadge={category && (
<Badge variant="primary">
{category}
</Badge>
)}
languagesContent={languages && languages.length > 0 && (
<Badge variant="default" icon={Languages}>
{languages.slice(0, 2).join(', ')}
{languages.length > 2 && ` +${languages.length - 2}`}
</Badge>
)}
statsContent={
<Group gap={4} justify="center">
<TeamStatItem label="Rating" value={ratingLabel} intent="primary" align="center" />
<TeamStatItem label="Wins" value={winsLabel} intent="success" align="center" />
<TeamStatItem label="Races" value={racesLabel} intent="high" align="center" />
</Group>
}
/> />
); );
} }

187
apps/website/components/teams/TeamDetailsHeader.tsx
View File

@@ -1,15 +1,15 @@
'use client'; 'use client';
import { Button } from '@/ui/Button'; import React from 'react';
import { Image } from '@/ui/Image'; import { Users, Calendar, Shield, Settings, Globe } from 'lucide-react';
import { TeamHero } from '@/ui/TeamHero';
import { Text } from '@/ui/Text';
import { Badge } from '@/ui/Badge';
import { StatGrid } from '@/ui/StatGrid';
import { Group } from '@/ui/Group';
import { Surface } from '@/ui/Surface';
import { Box } from '@/ui/Box'; import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Button } from '@/ui/Button';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
interface TeamDetailsHeaderProps { interface TeamDetailsHeaderProps {
teamId: string; teamId: string;
name: string; name: string;
@@ -17,81 +17,126 @@ interface TeamDetailsHeaderProps {
description?: string; description?: string;
logoUrl?: string; logoUrl?: string;
memberCount: number; memberCount: number;
memberCountLabel?: string;
foundedDate?: string;
foundedDateLabel?: string; foundedDateLabel?: string;
isAdmin?: boolean; isAdmin?: boolean;
onAdminClick?: () => void; onAdminClick?: () => void;
} }
export function TeamDetailsHeader({ export function TeamDetailsHeader({
name, name,
tag, tag,
description, description,
logoUrl, logoUrl,
memberCount, memberCount,
memberCountLabel,
foundedDate,
foundedDateLabel, foundedDateLabel,
isAdmin, isAdmin,
onAdminClick, onAdminClick,
}: TeamDetailsHeaderProps) { }: TeamDetailsHeaderProps) {
return ( return (
<TeamHero <Box marginBottom={12}>
title={ <Surface variant="precision" padding="none">
<Group gap={3}> <Box padding={10}>
{name} <Box display="flex" alignItems="start" gap={10} flexWrap="wrap">
{tag && <Badge variant="outline">[{tag}]</Badge>} {/* Logo Container */}
</Group> <Box
} width={48}
description={description || 'No mission statement provided.'} height={48}
sideContent={ rounded="xl"
<Surface bg="var(--ui-color-bg-base)"
variant="muted" display="flex"
rounded="lg" alignItems="center"
width="8rem" justifyContent="center"
height="8rem" overflow="hidden"
display="flex" border="1px solid var(--ui-color-border-muted)"
alignItems="center" flexShrink={0}
justifyContent="center" shadow="xl"
overflow="hidden" >
border {logoUrl ? (
> <Box as="img" src={logoUrl} alt={name} width="100%" height="100%" objectFit="cover" />
{logoUrl ? ( ) : (
<Image src={logoUrl} alt={name} width={128} height={128} /> <Box display="flex" flexDirection="col" alignItems="center" gap="xs">
) : ( <Icon icon={Users} size={12} intent="low" />
<Text size="2xl" weight="bold" variant="low">{name.substring(0, 2).toUpperCase()}</Text> <Text size="sm" variant="low" weight="bold" mono>{name.substring(0, 3).toUpperCase()}</Text>
)} </Box>
</Surface> )}
} </Box>
stats={
<StatGrid {/* Info Section */}
columns={2} <Box flex={1} minWidth="300px">
variant="box" <Stack gap="lg">
stats={[ <Box>
{ <Box display="flex" alignItems="center" gap="md" flexWrap="wrap" marginBottom={4}>
label: 'Personnel', <Heading level={1} weight="bold" style={{ fontSize: '3rem' }}>{name}</Heading>
value: `${memberCount} Units`, {tag && (
}, <Box paddingX={3} paddingY={1} bg="rgba(25, 140, 255, 0.1)" border="1px solid var(--ui-color-intent-primary)" rounded="md">
{ <Text variant="primary" size="sm" weight="bold" mono>{tag}</Text>
label: 'Established', </Box>
value: foundedDateLabel || 'Unknown', )}
} </Box>
]} <Box maxWidth="800px">
/> <Text variant="med" size="xl" leading="relaxed">
} {description || 'No mission statement provided.'}
actions={ </Text>
<Group gap={3}> </Box>
{isAdmin && ( </Box>
<Button variant="secondary" onClick={onAdminClick}>
Configure {/* Metadata Grid */}
</Button> <Box display="flex" gap={12} flexWrap="wrap" paddingTop={6} borderTop="1px solid var(--ui-color-border-muted)">
)} <Stack direction="row" align="center" gap="md">
<Button variant="primary"> <Box width={12} height={12} rounded="lg" bg="rgba(25, 140, 255, 0.05)" display="flex" alignItems="center" justifyContent="center" border="1px solid rgba(25, 140, 255, 0.1)">
Join Request <Icon icon={Users} size={5} intent="primary" />
</Button> </Box>
</Group> <Stack gap="none">
} <Box>
/> <Text size="xs" variant="low" uppercase>Personnel</Text>
</Box>
<Text weight="bold" mono size="lg">{memberCount} UNITS</Text>
</Stack>
</Stack>
<Stack direction="row" align="center" gap="md">
<Box width={12} height={12} rounded="lg" bg="rgba(78, 212, 224, 0.05)" display="flex" alignItems="center" justifyContent="center" border="1px solid rgba(78, 212, 224, 0.1)">
<Icon icon={Calendar} size={5} intent="telemetry" />
</Box>
<Stack gap="none">
<Box>
<Text size="xs" variant="low" uppercase>Established</Text>
</Box>
<Text weight="bold" mono size="lg">{foundedDateLabel || 'UNKNOWN'}</Text>
</Stack>
</Stack>
<Stack direction="row" align="center" gap="md">
<Box width={12} height={12} rounded="lg" bg="rgba(255, 255, 255, 0.02)" display="flex" alignItems="center" justifyContent="center" border="1px solid var(--ui-color-border-muted)">
<Icon icon={Globe} size={5} intent="low" />
</Box>
<Stack gap="none">
<Box>
<Text size="xs" variant="low" uppercase>Region</Text>
</Box>
<Text weight="bold" mono size="lg">GLOBAL</Text>
</Stack>
</Stack>
</Box>
</Stack>
</Box>
{/* Action Buttons */}
<Box>
<Stack direction="row" gap="md">
{isAdmin && (
<Button variant="secondary" onClick={onAdminClick} icon={<Settings size={18} />}>
Configure
</Button>
)}
<Button variant="primary" icon={<Shield size={18} />}>
Join Request
</Button>
</Stack>
</Box>
</Box>
</Box>
</Surface>
</Box>
); );
} }

9
apps/website/components/teams/TeamGrid.tsx
View File

@@ -1,5 +1,7 @@
'use client';
import React, { ReactNode } from 'react';
import { Grid } from '@/ui/Grid'; import { Grid } from '@/ui/Grid';
import { ReactNode } from 'react';
interface TeamGridProps { interface TeamGridProps {
children: ReactNode; children: ReactNode;
@@ -7,7 +9,10 @@ interface TeamGridProps {
export function TeamGrid({ children }: TeamGridProps) { export function TeamGrid({ children }: TeamGridProps) {
return ( return (
<Grid cols={{ base: 1, md: 2, lg: 3 }} gap={4}> <Grid
cols={3}
gap="lg"
>
{children} {children}
</Grid> </Grid>
); );

57
apps/website/components/teams/TeamMembersTable.tsx
View File

@@ -1,9 +1,12 @@
'use client'; 'use client';
import React from 'react';
import { Button } from '@/ui/Button'; import { Button } from '@/ui/Button';
import { Stack } from '@/ui/Stack'; import { Stack } from '@/ui/Stack';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table'; import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text'; import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Surface } from '@/ui/Surface';
interface Member { interface Member {
driverId: string; driverId: string;
@@ -21,40 +24,54 @@ interface TeamMembersTableProps {
export function TeamMembersTable({ members, isAdmin, onRemoveMember }: TeamMembersTableProps) { export function TeamMembersTable({ members, isAdmin, onRemoveMember }: TeamMembersTableProps) {
return ( return (
<Stack border borderColor="outline-steel" bg="surface-charcoal/30"> <Surface variant="precision" padding="none">
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableHeaderCell>Personnel</TableHeaderCell>
<TableHeader>Personnel</TableHeader> <TableHeaderCell>Role</TableHeaderCell>
<TableHeader>Role</TableHeader> <TableHeaderCell>Joined</TableHeaderCell>
<TableHeader>Joined</TableHeader> <TableHeaderCell textAlign="right">Rating</TableHeaderCell>
<TableHeader textAlign="right">Rating</TableHeader> {isAdmin && <TableHeaderCell textAlign="right">Actions</TableHeaderCell>}
{isAdmin && <TableHeader textAlign="right">Actions</TableHeader>}
</TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{members.map((member) => ( {members.map((member) => (
<TableRow key={member.driverId}> <TableRow key={member.driverId}>
<TableCell> <TableCell>
<Stack direction="row" align="center" gap={3}> <Stack direction="row" align="center" gap="sm">
<Stack w="8" h="8" bg="base-black" border borderColor="outline-steel" display="flex" center> <Box
<Text size="xs" weight="bold" color="primary-accent">{member.driverName.substring(0, 2).toUpperCase()}</Text> width={10}
</Stack> height={10}
<Text weight="bold" size="sm" color="text-white">{member.driverName}</Text> bg="var(--ui-color-bg-base)"
border="1px solid var(--ui-color-border-muted)"
display="flex"
alignItems="center"
justifyContent="center"
rounded="md"
>
<Text size="xs" weight="bold" variant="primary" mono>{member.driverName.substring(0, 2).toUpperCase()}</Text>
</Box>
<Text weight="bold" size="sm">{member.driverName}</Text>
</Stack> </Stack>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Stack px={2} py={0.5} bg="base-black" border borderColor="outline-steel" display="inline-block"> <Box
<Text size="xs" color="text-gray-400" font="mono" uppercase>{member.role}</Text> paddingX={2}
</Stack> paddingY={0.5}
bg="rgba(255,255,255,0.02)"
border="1px solid var(--ui-color-border-muted)"
display="inline-block"
rounded="sm"
>
<Text size="xs" variant="low" mono uppercase>{member.role}</Text>
</Box>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Text size="xs" color="text-gray-500" font="mono"> <Text size="xs" variant="low" mono>
{member.joinedAtLabel} {member.joinedAtLabel}
</Text> </Text>
</TableCell> </TableCell>
<TableCell textAlign="right"> <TableCell textAlign="right">
<Text font="mono" weight="bold" color="primary-accent">1450</Text> <Text mono weight="bold" variant="primary">1450</Text>
</TableCell> </TableCell>
{isAdmin && ( {isAdmin && (
<TableCell textAlign="right"> <TableCell textAlign="right">
@@ -73,6 +90,6 @@ export function TeamMembersTable({ members, isAdmin, onRemoveMember }: TeamMembe
))} ))}
</TableBody> </TableBody>
</Table> </Table>
</Stack> </Surface>
); );
} }

22
apps/website/components/teams/TeamSearchBar.tsx
View File

@@ -1,10 +1,9 @@
'use client'; 'use client';
import { Icon } from '@/ui/Icon'; import { Icon } from '@/ui/Icon';
import { Input } from '@/ui/Input'; import { Input } from '@/ui/Input';
import { Search } from 'lucide-react'; import { Search } from 'lucide-react';
import { Box } from '@/ui/Box';
import React from 'react'; import React from 'react';
interface TeamSearchBarProps { interface TeamSearchBarProps {
@@ -14,13 +13,16 @@ interface TeamSearchBarProps {
export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) { export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
return ( return (
<Input <Box marginBottom={8}>
type="text" <Input
placeholder="Search teams by name, description, region, or language..." type="text"
value={searchQuery} placeholder="FILTER BY TEAM NAME, REGION OR TAGS..."
onChange={(e) => onSearchChange(e.target.value)} value={searchQuery}
icon={<Icon icon={Search} size={5} intent="low" />} onChange={(e) => onSearchChange(e.target.value)}
fullWidth icon={<Icon icon={Search} size={4} intent="low" />}
/> variant="search"
fullWidth
/>
</Box>
); );
} }

44
apps/website/components/teams/TeamStandingsPanel.tsx
View File

@@ -1,8 +1,10 @@
'use client'; 'use client';
import React from 'react';
import { Box } from '@/ui/Box'; import { Box } from '@/ui/Box';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table'; import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text'; import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';
interface Standing { interface Standing {
leagueId: string; leagueId: string;
@@ -18,9 +20,9 @@ interface TeamStandingsPanelProps {
export function TeamStandingsPanel({ standings }: TeamStandingsPanelProps) { export function TeamStandingsPanel({ standings }: TeamStandingsPanelProps) {
return ( return (
<Box border borderColor="outline-steel" bg="surface-charcoal/30"> <Surface variant="precision" padding="none">
<Box p={4} borderBottom borderColor="outline-steel"> <Box padding={6} borderBottom="1px solid var(--ui-color-border-muted)">
<Text size="xs" weight="bold" color="text-gray-400" uppercase letterSpacing="widest"> <Text size="xs" weight="bold" variant="low" uppercase letterSpacing="0.1em">
Active Campaign Standings Active Campaign Standings
</Text> </Text>
</Box> </Box>
@@ -28,51 +30,49 @@ export function TeamStandingsPanel({ standings }: TeamStandingsPanelProps) {
{standings.length > 0 ? ( {standings.length > 0 ? (
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableHeaderCell>League</TableHeaderCell>
<TableHeader>League</TableHeader> <TableHeaderCell textAlign="center">Pos</TableHeaderCell>
<TableHeader textAlign="center">Pos</TableHeader> <TableHeaderCell textAlign="center">Races</TableHeaderCell>
<TableHeader textAlign="center">Races</TableHeader> <TableHeaderCell textAlign="right">Points</TableHeaderCell>
<TableHeader textAlign="right">Points</TableHeader>
</TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{standings.map((s) => ( {standings.map((s) => (
<TableRow key={s.leagueId}> <TableRow key={s.leagueId}>
<TableCell> <TableCell>
<Text weight="bold" size="sm" color="text-white">{s.leagueName}</Text> <Text weight="bold" size="sm">{s.leagueName}</Text>
</TableCell> </TableCell>
<TableCell textAlign="center"> <TableCell textAlign="center">
<Box <Box
display="inline-flex" display="inline-flex"
center center
w="6" width={8}
h="6" height={8}
bg={s.position <= 3 ? 'warning-amber/20' : 'base-black'} bg={s.position <= 3 ? 'rgba(255, 190, 77, 0.1)' : 'var(--ui-color-bg-base)'}
border border={s.position <= 3 ? '1px solid var(--ui-color-intent-warning)' : '1px solid var(--ui-color-border-muted)'}
borderColor={s.position <= 3 ? 'warning-amber/40' : 'outline-steel'} rounded="md"
> >
<Text size="xs" weight="bold" color={s.position <= 3 ? 'warning-amber' : 'text-gray-400'}> <Text size="xs" weight="bold" variant={s.position <= 3 ? 'warning' : 'low'} mono>
{s.position} {s.position}
</Text> </Text>
</Box> </Box>
</TableCell> </TableCell>
<TableCell textAlign="center"> <TableCell textAlign="center">
<Text size="xs" color="text-gray-500" font="mono">{s.races}</Text> <Text size="xs" variant="low" mono>{s.races}</Text>
</TableCell> </TableCell>
<TableCell textAlign="right"> <TableCell textAlign="right">
<Text font="mono" weight="bold" color="telemetry-aqua">{s.points}</Text> <Text mono weight="bold" variant="telemetry">{s.points}</Text>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
</Table> </Table>
) : ( ) : (
<Box py={12} textAlign="center"> <Box paddingY={16} textAlign="center">
<Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest"> <Text variant="low" mono size="xs" uppercase letterSpacing="0.1em">
No active campaign telemetry No active campaign telemetry
</Text> </Text>
</Box> </Box>
)} )}
</Box> </Surface>
); );
} }

47
apps/website/components/teams/TeamsDirectory.tsx
View File

@@ -1,46 +1,37 @@
'use client'; 'use client';
import { ReactNode } from 'react'; import React, { ReactNode } from 'react';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container'; import { Container } from '@/ui/Container';
import { Group } from '@/ui/Group'; import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { StatusDot } from '@/ui/StatusDot';
interface TeamsDirectoryProps { interface TeamsDirectoryProps {
children: ReactNode; children: ReactNode;
title?: string;
subtitle?: string;
} }
export function TeamsDirectory({ children, title, subtitle }: TeamsDirectoryProps) { export function TeamsDirectory({ children }: TeamsDirectoryProps) {
return ( return (
<Container size="lg" py={12}> <Box paddingY={12} bg="var(--ui-color-bg-base)" minHeight="100vh">
<Group direction="column" gap={10} fullWidth> <Container size="xl">
{title && (
<Group direction="row" align="center" gap={2}>
<StatusDot intent="primary" size="md" />
<Text size="xs" weight="bold" variant="low" uppercase>{title}</Text>
</Group>
)}
{children} {children}
</Group> </Container>
</Container> </Box>
); );
} }
export function TeamsDirectorySection({ children, title, accentColor = "primary-accent" }: { children: ReactNode, title: string, accentColor?: string }) { interface TeamsDirectorySectionProps {
const intentMap: Record<string, 'primary' | 'success' | 'warning' | 'critical' | 'telemetry'> = { title: string;
'primary-accent': 'primary', children: ReactNode;
'telemetry-aqua': 'telemetry', accentColor?: string;
}; }
export function TeamsDirectorySection({ title, children }: TeamsDirectorySectionProps) {
return ( return (
<Group direction="column" gap={6} fullWidth> <Box marginBottom={16}>
<Group direction="row" align="center" gap={2}> <Box marginBottom={8} borderBottom="1px solid var(--ui-color-border-muted)" paddingBottom={4}>
<StatusDot intent={intentMap[accentColor] || 'primary'} size="md" /> <Heading level={2} weight="bold" uppercase>{title}</Heading>
<Text size="xs" weight="bold" variant="low" uppercase>{title}</Text> </Box>
</Group>
{children} {children}
</Group> </Box>
); );
} }

23
apps/website/components/teams/TeamsDirectoryHeader.tsx
View File

@@ -1,27 +1,26 @@
'use client'; 'use client';
import React from 'react';
import { Plus } from 'lucide-react';
import { Button } from '@/ui/Button'; import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon'; import { TeamsHeader } from '@/ui/TeamsHeader';
import { PageHeader } from '@/ui/PageHeader';
import { Plus, Users } from 'lucide-react';
interface TeamsDirectoryHeaderProps { interface TeamsDirectoryHeaderProps {
onCreateTeam: () => void; onCreateTeam: () => void;
} }
export function TeamsDirectoryHeader({ onCreateTeam }: TeamsDirectoryHeaderProps) { export function TeamsDirectoryHeader({ onCreateTeam }: TeamsDirectoryHeaderProps) {
return ( return (
<PageHeader <TeamsHeader
icon={Users} title="Directory"
title="Teams" subtitle="Professional Racing Rosters"
description="Operational Units & Racing Collectives"
action={ action={
<Button <Button
variant="primary" variant="primary"
onClick={onCreateTeam} onClick={onCreateTeam}
icon={<Icon icon={Plus} size={4} />} icon={<Plus size={16} />}
> >
Initialize Team Register Team
</Button> </Button>
} }
/> />

5
apps/website/lib/builders/view-data/TeamsViewDataBuilder.ts
View File

@@ -19,6 +19,11 @@ export class TeamsViewDataBuilder {
ratingLabel: RatingDisplay.format(team.rating), ratingLabel: RatingDisplay.format(team.rating),
winsLabel: NumberDisplay.format(team.totalWins || 0), winsLabel: NumberDisplay.format(team.totalWins || 0),
racesLabel: NumberDisplay.format(team.totalRaces || 0), racesLabel: NumberDisplay.format(team.totalRaces || 0),
region: team.region,
isRecruiting: team.isRecruiting,
category: team.category,
performanceLevel: team.performanceLevel,
description: team.description,
})); }));
return { teams }; return { teams };

5
apps/website/lib/view-data/TeamsViewData.ts
View File

@@ -14,6 +14,11 @@ export interface TeamSummaryData {
ratingLabel: string; ratingLabel: string;
winsLabel: string; winsLabel: string;
racesLabel: string; racesLabel: string;
region?: string;
isRecruiting: boolean;
category?: string;
performanceLevel?: string;
description?: string;
} }
export interface TeamsViewData extends ViewData { export interface TeamsViewData extends ViewData {

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

@@ -1,23 +1,20 @@
'use client'; 'use client';
import { SlotTemplates } from '@/components/sponsors/SlotTemplates'; import React from 'react';
import { SponsorInsightsCard } from '@/components/sponsors/SponsorInsightsCard'; import { useRouter } from 'next/navigation';
import { useSponsorMode } from '@/hooks/sponsor/useSponsorMode';
import { Box } from '@/ui/Box'; import { Box } from '@/ui/Box';
import { Breadcrumbs } from '@/ui/Breadcrumbs';
import { Button } from '@/ui/Button';
import { Container } from '@/ui/Container'; import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading'; import { Heading } from '@/ui/Heading';
import { HorizontalStatItem } from '@/ui/HorizontalStatItem';
import { Grid } from '@/ui/Grid';
import { GridItem } from '@/ui/GridItem';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text'; import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { TeamAdmin } from '@/components/teams/TeamAdmin'; import { Grid } from '@/ui/Grid';
import { Button } from '@/ui/Button';
import { Panel } from '@/ui/Panel';
import { Breadcrumbs } from '@/ui/Breadcrumbs';
import { TeamDetailsHeader } from '@/components/teams/TeamDetailsHeader'; import { TeamDetailsHeader } from '@/components/teams/TeamDetailsHeader';
import { TeamMembersTable } from '@/components/teams/TeamMembersTable'; import { TeamMembersTable } from '@/components/teams/TeamMembersTable';
import { TeamStandingsPanel } from '@/components/teams/TeamStandingsPanel'; import { TeamStandingsPanel } from '@/components/teams/TeamStandingsPanel';
import { TeamAdmin } from '@/components/teams/TeamAdmin';
import type { TeamDetailViewData } from '@/lib/view-data/TeamDetailViewData'; import type { TeamDetailViewData } from '@/lib/view-data/TeamDetailViewData';
type Tab = 'overview' | 'roster' | 'standings' | 'admin'; type Tab = 'overview' | 'roster' | 'standings' | 'admin';
@@ -26,8 +23,6 @@ export interface TeamDetailTemplateProps {
viewData: TeamDetailViewData; viewData: TeamDetailViewData;
activeTab: Tab; activeTab: Tab;
loading: boolean; loading: boolean;
// Event handlers
onTabChange: (tab: Tab) => void; onTabChange: (tab: Tab) => void;
onUpdate: () => void; onUpdate: () => void;
onRemoveMember: (driverId: string) => void; onRemoveMember: (driverId: string) => void;
@@ -43,15 +38,14 @@ export function TeamDetailTemplate({
onRemoveMember, onRemoveMember,
onGoBack, onGoBack,
}: TeamDetailTemplateProps) { }: TeamDetailTemplateProps) {
const isSponsorMode = useSponsorMode();
const team = viewData.team; const team = viewData.team;
if (loading) { if (loading) {
return ( return (
<Box bg="base-black" minH="screen" display="flex" center> <Box bg="var(--ui-color-bg-base)" minHeight="100vh" display="flex" center>
<Stack align="center" gap={4}> <Stack align="center" gap="md">
<Box w="12" h="12" border borderColor="primary-accent" borderOpacity={0.2} borderTop borderTopColor="primary-accent" rounded="full" animate="spin" /> <Box width={12} height={12} border="2px solid var(--ui-color-border-muted)" borderTop="2px solid var(--ui-color-intent-primary)" rounded="full" animate="spin" />
<Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">Synchronizing Telemetry...</Text> <Text variant="low" size="xs" uppercase mono>Synchronizing Telemetry...</Text>
</Stack> </Stack>
</Box> </Box>
); );
@@ -59,28 +53,30 @@ export function TeamDetailTemplate({
if (!team) { if (!team) {
return ( return (
<Box bg="base-black" minH="screen"> <Box bg="var(--ui-color-bg-base)" minHeight="100vh">
<Container size="md" py={24}> <Box paddingY={24}>
<Box border borderColor="outline-steel" bg="surface-charcoal" p={12} textAlign="center"> <Container size="md">
<Heading level={1}>404: Team Disconnected</Heading> <Panel variant="dark" padding="lg">
<Text color="text-gray-500" block mt={4} font="mono"> <Stack align="center" gap="lg">
The requested team entity is no longer broadcasting. <Heading level={1}>404: Team Disconnected</Heading>
</Text> <Text variant="low" block mono>
<Box mt={8}> The requested team entity is no longer broadcasting.
<Button variant="primary" onClick={onGoBack}> </Text>
Return to Base <Button variant="primary" onClick={onGoBack}>
</Button> Return to Base
</Box> </Button>
</Box> </Stack>
</Container> </Panel>
</Container>
</Box>
</Box> </Box>
); );
} }
return ( return (
<Box bg="base-black" minH="screen"> <Box bg="var(--ui-color-bg-base)" minHeight="100vh" paddingY={8}>
<Container size="lg" py={8}> <Container size="xl">
<Stack gap={8}> <Stack gap="lg">
<Breadcrumbs <Breadcrumbs
items={[ items={[
{ label: 'Home', href: '/' }, { label: 'Home', href: '/' },
@@ -89,42 +85,26 @@ export function TeamDetailTemplate({
]} ]}
/> />
{isSponsorMode && (
<SponsorInsightsCard
entityType="team"
entityId={team.id}
entityName={team.name}
tier="standard"
metrics={viewData.teamMetrics}
slots={SlotTemplates.team(true, true, '$500', '$250')}
trustScoreLabel="90/100"
monthlyActivityLabel="85%"
onNavigate={(href) => window.location.href = href}
/>
)}
<TeamDetailsHeader <TeamDetailsHeader
teamId={team.id} teamId={team.id}
name={team.name} name={team.name}
tag={team.tag} tag={team.tag}
description={team.description} description={team.description}
memberCount={viewData.memberships.length} memberCount={viewData.memberships.length}
memberCountLabel={viewData.memberCountLabel}
foundedDate={team.createdAt}
foundedDateLabel={team.foundedDateLabel} foundedDateLabel={team.foundedDateLabel}
isAdmin={viewData.isAdmin} isAdmin={viewData.isAdmin}
onAdminClick={() => onTabChange('admin')} onAdminClick={() => onTabChange('admin')}
/> />
{/* Tabs */} {/* Tabs */}
<Box borderBottom borderColor="outline-steel"> <Box borderBottom="1px solid var(--ui-color-border-muted)">
<Stack direction="row" gap={8}> <Stack direction="row" gap="lg">
{viewData.tabs.map((tab) => ( {viewData.tabs.map((tab) => (
tab.visible && ( tab.visible && (
<Box <Box
key={tab.id} key={tab.id}
onClick={() => onTabChange(tab.id)} onClick={() => onTabChange(tab.id as Tab)}
pb={4} paddingBottom={4}
cursor="pointer" cursor="pointer"
position="relative" position="relative"
> >
@@ -132,8 +112,7 @@ export function TeamDetailTemplate({
weight="bold" weight="bold"
size="xs" size="xs"
uppercase uppercase
letterSpacing="widest" variant={activeTab === tab.id ? 'primary' : 'low'}
color={activeTab === tab.id ? 'text-primary-accent' : 'text-gray-500'}
> >
{tab.label} {tab.label}
</Text> </Text>
@@ -141,10 +120,10 @@ export function TeamDetailTemplate({
<Box <Box
position="absolute" position="absolute"
bottom="-1px" bottom="-1px"
left="0" left={0}
right="0" right={0}
h="2px" height="2px"
bg="primary-accent" bg="var(--ui-color-intent-primary)"
/> />
)} )}
</Box> </Box>
@@ -155,58 +134,73 @@ export function TeamDetailTemplate({
<Box> <Box>
{activeTab === 'overview' && ( {activeTab === 'overview' && (
<Stack gap={8}> <Grid cols={3} gap="lg">
<Grid cols={12} gap={8}> <Box gridCols={{ lg: 2 }}>
<GridItem colSpan={12} lgSpan={8}> <Stack gap="lg">
<Stack gap={8}> <Panel variant="default" padding="md">
<Box border borderColor="outline-steel" bg="surface-charcoal" bgOpacity={0.3} p={6}> <Text size="xs" weight="bold" variant="low" uppercase>Mission Statement</Text>
<Text size="xs" weight="bold" color="text-gray-400" uppercase>Mission Statement</Text> <Box marginTop={4}>
<Text color="text-gray-300" leading="relaxed" size="sm" block mt={4}> <Text variant="med" leading="relaxed" size="sm" block>
{team.description || 'No description provided.'} {team.description || 'No description provided.'}
</Text> </Text>
</Box> </Box>
</Panel>
<Box> <Box>
<Text size="xs" weight="bold" color="text-gray-400" uppercase mb={4} block>Recent Operations</Text> <Box marginBottom={4}>
<Box py={12} border borderStyle="dashed" borderColor="outline-steel" bg="surface-charcoal" bgOpacity={0.1} textAlign="center"> <Text size="xs" weight="bold" variant="low" uppercase block>Recent Operations</Text>
<Text color="text-gray-600" font="mono" size="xs">NO RECENT TELEMETRY DATA</Text> </Box>
<Panel variant="muted" padding="lg">
<Box textAlign="center">
<Text variant="low" mono size="xs">NO RECENT TELEMETRY DATA</Text>
</Box> </Box>
</Box> </Panel>
</Stack> </Box>
</GridItem> </Stack>
</Box>
<GridItem colSpan={12} lgSpan={4}> <Box>
<Stack gap={6}> <Stack gap="lg">
<Box border borderColor="outline-steel" bg="surface-charcoal" bgOpacity={0.5} p={6}> <Panel variant="default" padding="md">
<Text size="xs" weight="bold" color="text-gray-400" uppercase mb={4} block>Performance Metrics</Text> <Box marginBottom={4}>
<Stack gap={4}> <Text size="xs" weight="bold" variant="low" uppercase block>Performance Metrics</Text>
<HorizontalStatItem label="Avg Rating" value="1450" color="text-primary-accent" />
<HorizontalStatItem label="Win Rate" value="12.5%" color="text-telemetry-aqua" />
<HorizontalStatItem label="Total Podiums" value="42" color="text-warning-amber" />
</Stack>
</Box> </Box>
</Stack> <Stack gap="md">
</GridItem> <Box display="flex" justifyContent="between" alignItems="center">
</Grid> <Text size="xs" variant="low" uppercase>Avg Rating</Text>
</Stack> <Text weight="bold" mono variant="primary">1450</Text>
</Box>
<Box display="flex" justifyContent="between" alignItems="center">
<Text size="xs" variant="low" uppercase>Win Rate</Text>
<Text weight="bold" mono variant="telemetry">12.5%</Text>
</Box>
<Box display="flex" justifyContent="between" alignItems="center">
<Text size="xs" variant="low" uppercase>Total Podiums</Text>
<Text weight="bold" mono variant="warning">42</Text>
</Box>
</Stack>
</Panel>
</Stack>
</Box>
</Grid>
)} )}
{activeTab === 'roster' && ( {activeTab === 'roster' && (
<Box> <Stack gap="md">
<Stack direction="row" align="center" justify="between" mb={6}> <Box display="flex" alignItems="center" justifyContent="between">
<Text size="xs" weight="bold" color="text-gray-400" uppercase>Active Personnel</Text> <Text size="xs" weight="bold" variant="low" uppercase>Active Personnel</Text>
<Text size="xs" color="text-gray-500" font="mono">{viewData.memberships.length} UNITS ACTIVE</Text> <Text size="xs" variant="low" mono>{viewData.memberships.length} UNITS ACTIVE</Text>
</Stack> </Box>
<TeamMembersTable <TeamMembersTable
members={viewData.memberships} members={viewData.memberships}
isAdmin={viewData.isAdmin} isAdmin={viewData.isAdmin}
onRemoveMember={onRemoveMember} onRemoveMember={onRemoveMember}
/> />
</Box> </Stack>
)} )}
{activeTab === 'standings' && ( {activeTab === 'standings' && (
<TeamStandingsPanel standings={[]} /> // Mocked for now as in original <TeamStandingsPanel standings={[]} />
)} )}
{activeTab === 'admin' && viewData.isAdmin && ( {activeTab === 'admin' && viewData.isAdmin && (

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

@@ -1,67 +1,119 @@
'use client'; 'use client';
import { TeamCard } from '@/components/teams/TeamCardWrapper'; import React, { useMemo } from 'react';
import { TeamGrid } from '@/components/teams/TeamGrid';
import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
import { TeamsDirectory, TeamsDirectorySection } from '@/components/teams/TeamsDirectory';
import { EmptyState } from '@/ui/EmptyState';
import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
import { Users } from 'lucide-react'; import { Users } from 'lucide-react';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts'; import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
import React from 'react'; import { TeamsViewData, TeamSummaryData } from '@/lib/view-data/TeamsViewData';
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 { EmptyState } from '@/ui/EmptyState';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
interface TeamsTemplateProps extends TemplateProps<TeamsViewData> { interface TeamsTemplateProps extends TemplateProps<TeamsViewData> {
searchQuery: string;
onSearchChange: (query: string) => void;
onTeamClick?: (teamId: string) => void; onTeamClick?: (teamId: string) => void;
onViewFullLeaderboard: () => void; onViewFullLeaderboard: () => void;
onCreateTeam: () => void; onCreateTeam: () => void;
} }
export function TeamsTemplate({ viewData, onTeamClick, onViewFullLeaderboard, onCreateTeam }: TeamsTemplateProps) { export function TeamsTemplate({
viewData,
searchQuery,
onSearchChange,
onTeamClick,
onViewFullLeaderboard,
onCreateTeam
}: TeamsTemplateProps) {
const { teams } = viewData; const { teams } = viewData;
const filteredTeams = useMemo(() => {
return teams.filter(team =>
team.teamName.toLowerCase().includes(searchQuery.toLowerCase()) ||
(team.leagueName && team.leagueName.toLowerCase().includes(searchQuery.toLowerCase())) ||
(team.region && team.region.toLowerCase().includes(searchQuery.toLowerCase()))
);
}, [teams, searchQuery]);
const clusters = useMemo(() => {
if (searchQuery) {
return [{ title: 'Search Results', teams: filteredTeams }];
}
const topTeams = [...teams]
.sort((a, b) => parseFloat(b.ratingLabel) - parseFloat(a.ratingLabel))
.slice(0, 3);
const recruitingTeams = teams.filter(t => t.isRecruiting && !topTeams.find(top => top.teamId === t.teamId));
const otherTeams = teams.filter(t =>
!topTeams.find(top => top.teamId === t.teamId) &&
!recruitingTeams.find(r => r.teamId === t.teamId)
);
const result = [];
if (topTeams.length > 0) result.push({ title: 'Top Rated Teams', teams: topTeams });
if (recruitingTeams.length > 0) result.push({ title: 'Recruiting Now', teams: recruitingTeams });
if (otherTeams.length > 0) result.push({ title: 'Active Rosters', teams: otherTeams });
return result;
}, [teams, filteredTeams, searchQuery]);
return ( return (
<TeamsDirectory> <div className="min-h-screen bg-[var(--ui-color-bg-base)] py-12">
<TeamsDirectoryHeader onCreateTeam={onCreateTeam} /> <Container size="xl">
<TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
<TeamsDirectorySection title="Active Rosters" accentColor="primary-accent">
{teams.length > 0 ? ( <TeamSearchBar
<TeamGrid> searchQuery={searchQuery}
{teams.map((team) => ( onSearchChange={onSearchChange}
<TeamCard
key={team.teamId}
id={team.teamId}
name={team.teamName}
memberCount={team.memberCount}
logo={team.logoUrl}
ratingLabel={team.ratingLabel}
winsLabel={team.winsLabel}
racesLabel={team.racesLabel}
onClick={() => onTeamClick?.(team.teamId)}
/>
))}
</TeamGrid>
) : (
<EmptyState
icon={Users}
title="No teams yet"
description="Get started by creating your first racing team"
action={{
label: 'Create Team',
onClick: onCreateTeam,
variant: 'primary'
}}
/>
)}
</TeamsDirectorySection>
<TeamsDirectorySection title="Global Standings" accentColor="telemetry-aqua">
<TeamLeaderboardPreview
topTeams={[]}
onTeamClick={(id) => onTeamClick?.(id)}
onViewFullLeaderboard={onViewFullLeaderboard}
/> />
</TeamsDirectorySection>
</TeamsDirectory> {clusters.length > 0 ? (
<div className="space-y-16">
{clusters.map((cluster) => (
<div key={cluster.title} className="space-y-8">
<div className="flex items-center gap-4">
<Heading level={2} weight="bold" uppercase tracking-widest size="sm">
{cluster.title}
</Heading>
<div className="flex-1 h-px bg-[var(--ui-color-border-muted)]" />
<div className="px-3 py-1 border border-[var(--ui-color-border-muted)]">
<Text size="xs" mono variant="low">{cluster.teams.length}</Text>
</div>
</div>
<TeamGrid>
{cluster.teams.map((team) => (
<TeamCard
key={team.teamId}
team={team}
onClick={(id) => onTeamClick?.(id)}
/>
))}
</TeamGrid>
</div>
))}
</div>
) : (
<div className="py-20 border border-dashed border-[var(--ui-color-border-muted)] flex flex-col items-center justify-center text-center">
<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'
}}
/>
</div>
)}
</Container>
</div>
); );
} }

12
apps/website/ui/Box.tsx
View File

@@ -12,7 +12,7 @@ import React, { forwardRef, ForwardedRef, ElementType } from 'react';
* If you need more complex behavior, create a specific component in apps/website/components. * If you need more complex behavior, create a specific component in apps/website/components.
*/ */
export type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96; export type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | string;
interface ResponsiveSpacing { interface ResponsiveSpacing {
base?: Spacing; base?: Spacing;
@@ -82,7 +82,7 @@ export interface BoxProps<T extends ElementType> {
h?: string | number | ResponsiveValue<string | number>; h?: string | number | ResponsiveValue<string | number>;
// Display // Display
display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none' | string | ResponsiveValue<'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none' | string>; display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none' | string | ResponsiveValue<'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none' | string | any>;
center?: boolean; center?: boolean;
overflow?: 'auto' | 'hidden' | 'visible' | 'scroll' | string; overflow?: 'auto' | 'hidden' | 'visible' | 'scroll' | string;
overflowX?: 'auto' | 'hidden' | 'visible' | 'scroll'; overflowX?: 'auto' | 'hidden' | 'visible' | 'scroll';
@@ -393,7 +393,13 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44', 16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96', 48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96',
'auto': 'auto' 'auto': 'auto',
'none': '0',
'xs': '2',
'sm': '4',
'md': '6',
'lg': '8',
'xl': '12'
}; };
const getSpacingClass = (prefix: string, value: Spacing | 'auto' | ResponsiveSpacing | undefined) => { const getSpacingClass = (prefix: string, value: Spacing | 'auto' | ResponsiveSpacing | undefined) => {

6
apps/website/ui/Button.tsx
View File

@@ -41,6 +41,12 @@ export interface ButtonProps {
borderWidth?: string | any; borderWidth?: string | any;
aspectRatio?: string | any; aspectRatio?: string | any;
border?: boolean | any; border?: boolean | any;
ring?: string | any;
overflow?: string | any;
display?: string | any;
transform?: string | any;
hoverScale?: boolean | any;
minHeight?: string | any;
} }
/** /**

21
apps/website/ui/Card.tsx
View File

@@ -1,12 +1,13 @@
import React, { ReactNode, forwardRef } from 'react'; import React, { ReactNode, forwardRef } from 'react';
import { Heading } from './Heading'; import { Heading } from './Heading';
import { Spacing } from './Box';
export interface CardProps { export interface CardProps {
children: ReactNode; children: ReactNode;
variant?: 'default' | 'muted' | 'outline' | 'glass' | 'dark' | any; variant?: 'default' | 'muted' | 'outline' | 'glass' | 'dark' | 'precision' | 'bordered' | 'elevated' | 'rarity-common' | 'rarity-rare' | 'rarity-epic' | 'rarity-legendary';
title?: string | ReactNode; title?: string | ReactNode;
footer?: ReactNode; footer?: ReactNode;
padding?: 'none' | 'sm' | 'md' | 'lg' | number | any; padding?: Spacing | number | any;
className?: string; className?: string;
style?: React.CSSProperties; style?: React.CSSProperties;
bg?: string; bg?: string;
@@ -28,6 +29,9 @@ export interface CardProps {
gap?: number; gap?: number;
py?: number; py?: number;
backgroundColor?: string; backgroundColor?: string;
group?: boolean | any;
w?: string | any;
justifyContent?: string | any;
} }
/** /**
@@ -68,6 +72,13 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
outline: 'bg-transparent border-[var(--ui-color-border-default)]', outline: 'bg-transparent border-[var(--ui-color-border-default)]',
glass: 'bg-white/[0.03] backdrop-blur-md border-white/[0.05]', glass: 'bg-white/[0.03] backdrop-blur-md border-white/[0.05]',
dark: 'bg-[var(--ui-color-bg-base)] border-[var(--ui-color-border-default)]', dark: 'bg-[var(--ui-color-bg-base)] border-[var(--ui-color-border-default)]',
precision: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.02)]',
bordered: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)]',
elevated: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)] shadow-md',
'rarity-common': 'bg-gray-500/10 border-gray-500/50',
'rarity-rare': 'bg-blue-500/10 border-blue-500/50',
'rarity-epic': 'bg-purple-500/10 border-purple-500/50',
'rarity-legendary': 'bg-orange-500/10 border-orange-500/50',
}; };
const paddingClasses = { const paddingClasses = {
@@ -78,7 +89,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
}; };
const getPaddingClass = (pad: any) => { const getPaddingClass = (pad: any) => {
if (typeof pad === 'string') return paddingClasses[pad as keyof typeof paddingClasses] || paddingClasses.md; if (typeof pad === 'string') return `p-${pad}`;
return ''; // Handled in style return ''; // Handled in style
}; };
@@ -86,8 +97,8 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
...style, ...style,
...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}), ...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
...(backgroundColor ? { backgroundColor } : {}), ...(backgroundColor ? { backgroundColor } : {}),
...(p !== undefined ? { padding: `${p * 0.25}rem` } : {}), ...(p !== undefined ? { padding: typeof p === 'number' ? `${p * 0.25}rem` : undefined } : {}),
...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}), ...(py !== undefined ? { paddingTop: typeof py === 'number' ? `${py * 0.25}rem` : undefined, paddingBottom: typeof py === 'number' ? `${py * 0.25}rem` : undefined } : {}),
...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {}), ...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {}),
...(responsiveColSpan?.lg ? { gridColumn: `span ${responsiveColSpan.lg} / span ${responsiveColSpan.lg}` } : {}), ...(responsiveColSpan?.lg ? { gridColumn: `span ${responsiveColSpan.lg} / span ${responsiveColSpan.lg}` } : {}),
...(overflow ? { overflow } : {}), ...(overflow ? { overflow } : {}),

8
apps/website/ui/Heading.tsx
View File

@@ -1,4 +1,4 @@
import { ReactNode, forwardRef } from 'react'; import React, { ReactNode, forwardRef, CSSProperties } from 'react';
export interface HeadingProps { export interface HeadingProps {
children: ReactNode; children: ReactNode;
@@ -8,7 +8,7 @@ export interface HeadingProps {
uppercase?: boolean; uppercase?: boolean;
intent?: 'primary' | 'telemetry' | 'warning' | 'critical' | 'default' | any; intent?: 'primary' | 'telemetry' | 'warning' | 'critical' | 'default' | any;
className?: string; className?: string;
style?: React.CSSProperties; style?: CSSProperties;
mb?: number | any; mb?: number | any;
marginBottom?: number | any; marginBottom?: number | any;
mt?: number | any; mt?: number | any;
@@ -19,6 +19,10 @@ export interface HeadingProps {
truncate?: boolean; truncate?: boolean;
size?: string; size?: string;
icon?: ReactNode; icon?: ReactNode;
id?: string;
lineHeight?: string | any;
groupHoverColor?: string | any;
transition?: boolean | any;
} }
/** /**

122
apps/website/ui/Panel.tsx
View File

@@ -1,94 +1,100 @@
import { ReactNode } from 'react'; import React, { ReactNode, CSSProperties } from 'react';
import { Heading } from './Heading'; import { Spacing } from './Box';
import { Text } from './Text';
export interface PanelProps { export interface PanelProps {
title?: string;
description?: string;
children: ReactNode; children: ReactNode;
footer?: ReactNode; variant?: 'default' | 'muted' | 'outline' | 'glass' | 'dark' | 'precision' | 'bordered' | 'elevated';
variant?: 'default' | 'muted' | 'ghost' | 'dark' | any; padding?: Spacing | number;
padding?: 'none' | 'sm' | 'md' | 'lg' | number | any; onClick?: () => void;
style?: CSSProperties;
title?: string | ReactNode;
actions?: ReactNode; actions?: ReactNode;
className?: string; description?: string;
style?: React.CSSProperties; footer?: ReactNode;
border?: boolean; border?: boolean;
rounded?: string; rounded?: string;
className?: string;
borderColor?: string; borderColor?: string;
bg?: string; bg?: string;
} }
/** export function Panel({
* Panel - Redesigned for "Modern Precision" theme.
* Includes compatibility props to prevent app-wide breakage.
*/
export const Panel = ({
title,
description,
children, children,
footer, variant = 'default',
variant = 'default',
padding = 'md', padding = 'md',
actions, onClick,
className,
style, style,
title,
actions,
description,
footer,
border, border,
rounded, rounded,
borderColor, className
bg, }: PanelProps) {
}: PanelProps) => {
const variantClasses = { const variantClasses = {
default: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)]', default: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] shadow-sm',
muted: 'bg-[var(--ui-color-bg-surface-muted)] border-[var(--ui-color-border-muted)]', muted: 'bg-[var(--ui-color-bg-surface-muted)] border border-[var(--ui-color-border-muted)]',
ghost: 'bg-transparent border-transparent', outline: 'bg-transparent border border-[var(--ui-color-border-default)]',
dark: 'bg-[var(--ui-color-bg-base)] border-[var(--ui-color-border-default)]', glass: 'bg-white/[0.03] backdrop-blur-md border border-white/[0.05]',
dark: 'bg-[var(--ui-color-bg-base)] border border-[var(--ui-color-border-default)]',
precision: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.02)]',
bordered: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)]',
elevated: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] shadow-md',
}; };
const paddingClasses = { const paddingClasses = {
none: 'p-0', none: 'p-0',
sm: 'p-2', xs: 'p-2',
md: 'p-4', sm: 'p-4',
lg: 'p-8', md: 'p-6',
lg: 'p-10',
}; };
const getPaddingClass = (pad: any) => { const getPaddingClass = (p: any) => {
if (typeof pad === 'string') return paddingClasses[pad as keyof typeof paddingClasses] || paddingClasses.md; if (typeof p === 'string') return `p-${p}`;
return ''; // Handled in style return '';
}; };
const combinedStyle: React.CSSProperties = { const interactiveClasses = onClick
...style, ? 'cursor-pointer hover:border-[var(--ui-color-border-bright)] transition-all duration-200 ease-in-out active:scale-[0.99]'
...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}), : '';
...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {}),
...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
...(border === false ? { border: 'none' } : {}),
};
return ( return (
<div className={`border ${variantClasses[variant as keyof typeof variantClasses] || variantClasses.default} ${getPaddingClass(padding)} transition-all duration-200 ${className || ''}`} style={combinedStyle}> <div
{(title || description || actions) && ( className={`${variantClasses[variant]} ${getPaddingClass(padding)} ${interactiveClasses} ${rounded ? `rounded-${rounded}` : 'rounded-md'} ${border ? 'border' : ''} ${className || ''}`}
<div className={`border-b border-[var(--ui-color-border-muted)] flex items-center justify-between ${getPaddingClass(padding)}`}> onClick={onClick}
<div> style={{
{title && <Heading level={4} weight="semibold" uppercase>{title}</Heading>} ...style,
{description && <Text size="xs" variant="low">{description}</Text>} ...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {})
</div> }}
{actions && ( >
<div className="flex items-center gap-2"> {(title || actions) && (
{actions} <div className="flex items-center justify-between mb-6 border-b border-[var(--ui-color-border-muted)] pb-4">
{title && (
<div className="flex flex-col gap-1">
<div className="flex items-center gap-2">
<div className="w-1 h-4 bg-[var(--ui-color-intent-primary)]" />
<h3 className="text-xs font-bold uppercase tracking-widest text-[var(--ui-color-text-high)]">
{title}
</h3>
</div>
{description && (
<p className="text-[10px] text-[var(--ui-color-text-low)] uppercase mono ml-3">
{description}
</p>
)}
</div> </div>
)} )}
{actions && <div>{actions}</div>}
</div> </div>
)} )}
{children}
<div className={typeof padding === 'number' ? '' : getPaddingClass(padding)}>
{children}
</div>
{footer && ( {footer && (
<div className={`border-t border-[var(--ui-color-border-muted)] bg-white/[0.02] ${getPaddingClass(padding)}`}> <div className="mt-6 pt-4 border-t border-[var(--ui-color-border-muted)]">
{footer} {footer}
</div> </div>
)} )}
</div> </div>
); );
}; }

4
apps/website/ui/Surface.tsx
View File

@@ -17,8 +17,8 @@ export interface SurfaceProps<T extends ElementType = 'div'> extends BoxProps<T>
as?: T; as?: T;
children?: ReactNode; children?: ReactNode;
variant?: 'default' | 'dark' | 'muted' | 'glass' | 'discord' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord-inner' | 'outline' | 'rarity-common' | 'rarity-rare' | 'rarity-epic' | 'rarity-legendary' | 'precision'; variant?: 'default' | 'dark' | 'muted' | 'glass' | 'discord' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord-inner' | 'outline' | 'rarity-common' | 'rarity-rare' | 'rarity-epic' | 'rarity-legendary' | 'precision';
rounded?: keyof ThemeRadii | 'none' | '2xl'; rounded?: keyof ThemeRadii | 'none' | '2xl' | string | boolean;
shadow?: keyof ThemeShadows | 'none'; shadow?: keyof ThemeShadows | 'none' | string;
} }
export const Surface = forwardRef(<T extends ElementType = 'div'>( export const Surface = forwardRef(<T extends ElementType = 'div'>(

33
apps/website/ui/Table.tsx
View File

@@ -1,4 +1,4 @@
import React, { ReactNode } from 'react'; import React, { ReactNode, CSSProperties } from 'react';
import { Surface } from './Surface'; import { Surface } from './Surface';
export interface TableProps { export interface TableProps {
@@ -16,7 +16,14 @@ export const Table = ({ children, className }: TableProps) => {
); );
}; };
export const TableHeader = ({ children, className, textAlign, w }: { children: ReactNode, className?: string, textAlign?: 'left' | 'center' | 'right', w?: string }) => { export interface TableHeaderProps {
children: ReactNode;
className?: string;
textAlign?: 'left' | 'center' | 'right';
w?: string;
}
export const TableHeader = ({ children, className, textAlign, w }: TableHeaderProps) => {
return ( return (
<thead className={`bg-[var(--ui-color-bg-base)] border-b border-[var(--ui-color-border-default)] ${className || ''}`}> <thead className={`bg-[var(--ui-color-bg-base)] border-b border-[var(--ui-color-border-default)] ${className || ''}`}>
<tr> <tr>
@@ -55,7 +62,14 @@ export const TableRow = ({ children, onClick, className, variant, clickable, bg,
); );
}; };
export const TableHeaderCell = ({ children, textAlign, w, className }: { children: ReactNode, textAlign?: 'left' | 'center' | 'right', w?: string, className?: string }) => { export interface TableHeaderCellProps {
children: ReactNode;
textAlign?: 'left' | 'center' | 'right';
w?: string;
className?: string;
}
export const TableHeaderCell = ({ children, textAlign, w, className }: TableHeaderCellProps) => {
const alignClass = textAlign === 'center' ? 'text-center' : (textAlign === 'right' ? 'text-right' : 'text-left'); const alignClass = textAlign === 'center' ? 'text-center' : (textAlign === 'right' ? 'text-right' : 'text-left');
return ( return (
<th <th
@@ -67,7 +81,18 @@ export const TableHeaderCell = ({ children, textAlign, w, className }: { childre
); );
}; };
export const TableCell = ({ children, textAlign, className, py, colSpan, w, position, ...props }: { children: ReactNode, textAlign?: 'left' | 'center' | 'right', className?: string, py?: number, colSpan?: number, w?: string, position?: string, [key: string]: any }) => { export interface TableCellProps {
children: ReactNode;
textAlign?: 'left' | 'center' | 'right';
className?: string;
py?: number;
colSpan?: number;
w?: string;
position?: string;
[key: string]: any;
}
export const TableCell = ({ children, textAlign, className, py, colSpan, w, position, ...props }: TableCellProps) => {
const alignClass = textAlign === 'center' ? 'text-center' : (textAlign === 'right' ? 'text-right' : 'text-left'); const alignClass = textAlign === 'center' ? 'text-center' : (textAlign === 'right' ? 'text-right' : 'text-left');
return ( return (
<td <td

138
apps/website/ui/TeamCard.tsx
View File

@@ -1,81 +1,115 @@
import { ChevronRight, Globe, Users } from 'lucide-react'; import { ChevronRight, Globe, Users, Zap } from 'lucide-react';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Badge } from './Badge';
import { Box } from './Box';
import { Card } from './Card'; import { Card } from './Card';
import { Heading } from './Heading'; import { Heading } from './Heading';
import { Icon } from './Icon'; import { Icon } from './Icon';
import { Text } from './Text'; import { Text } from './Text';
import { Badge } from './Badge';
export interface TeamCardProps { export interface TeamCardProps {
name: string; name: string;
description?: string; leagueName?: string;
logo?: ReactNode; logo?: ReactNode;
memberCount: number; memberCount: number;
isRecruiting?: boolean; rating?: string;
badges?: ReactNode; wins?: string;
races?: string;
region?: string; region?: string;
isRecruiting?: boolean;
performanceLevel?: string;
onClick?: () => void; onClick?: () => void;
description?: string;
} }
export const TeamCard = ({ export const TeamCard = ({
name, name,
description, leagueName,
logo, logo,
memberCount, memberCount,
isRecruiting, rating,
badges, wins,
region, races,
region = 'EU',
isRecruiting,
performanceLevel,
description,
onClick onClick
}: TeamCardProps) => { }: TeamCardProps) => {
return ( return (
<Card <Card
variant="dark" variant="precision"
onClick={onClick} padding="none"
style={{ cursor: onClick ? 'pointer' : 'default', height: '100%', display: 'flex', flexDirection: 'column' }} onClick={onClick}
transition
> >
<Box display="flex" gap={4} marginBottom={4}> <div className="p-6 space-y-6">
<Box width={16} height={16} rounded="lg" bg="var(--ui-color-bg-surface-muted)" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden', flexShrink: 0 }}> {/* Header: Logo and Identity */}
{logo} <div className="flex items-center gap-4">
</Box> <div className="w-12 h-12 bg-[var(--ui-color-bg-base)] flex items-center justify-center overflow-hidden border border-[var(--ui-color-border-muted)]">
<Box flex={1} minWidth="0"> {logo || <Icon icon={Users} size={5} intent="low" />}
<Box display="flex" alignItems="start" justifyContent="between" gap={2}> </div>
<Heading level={4} weight="bold" truncate>{name}</Heading> <div className="flex-1 min-w-0">
{isRecruiting && <Badge variant="success" size="sm">RECRUITING</Badge>} <div className="flex items-center justify-between gap-2">
</Box> <Heading level={4} weight="bold" truncate uppercase>{name}</Heading>
<Box display="flex" gap={2} flexWrap="wrap" marginTop={2}> {isRecruiting && (
{badges} <Badge variant="success" size="xs">RECRUITING</Badge>
</Box> )}
</Box>
</Box>
<Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem', marginBottom: '1rem' }} block leading="relaxed">
{description || 'No description available'}
</Text>
{region && (
<Box marginBottom={4}>
<Badge variant="default" size="sm">
<div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
<Icon icon={Globe} size={3} intent="primary" />
<Text size="xs" weight="bold">{region}</Text>
</div> </div>
</Badge> <div className="flex items-center gap-2">
</Box> {leagueName && <Text size="xs" variant="low" truncate uppercase mono>{leagueName}</Text>}
)} {performanceLevel && (
<div className="flex items-center gap-1">
<Icon icon={Zap} size={3} intent="telemetry" />
<Text size="xs" variant="telemetry" mono uppercase>{performanceLevel}</Text>
</div>
)}
</div>
</div>
</div>
<Box marginTop="auto" paddingTop={4} style={{ borderTop: '1px solid var(--ui-color-border-muted)', opacity: 0.5 }} display="flex" alignItems="center" justifyContent="between"> {/* Technical Stats Grid - Engineered Look */}
<Box display="flex" alignItems="center" gap={2}> {(rating || wins || races) && (
<Icon icon={Users} size={3} intent="low" /> <div className="grid grid-cols-3 gap-px bg-[var(--ui-color-border-muted)] border border-[var(--ui-color-border-muted)]">
<Text size="xs" variant="low" font="mono"> <div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
{memberCount} {memberCount === 1 ? 'MEMBER' : 'MEMBERS'} <Text size="xs" variant="low" uppercase block mb={1} mono>Rating</Text>
<Text size="md" weight="bold" mono variant="primary">{rating || '-'}</Text>
</div>
<div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
<Text size="xs" variant="low" uppercase block mb={1} mono>Wins</Text>
<Text size="md" weight="bold" mono variant="telemetry">{wins || '-'}</Text>
</div>
<div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
<Text size="xs" variant="low" uppercase block mb={1} mono>Races</Text>
<Text size="md" weight="bold" mono variant="high">{races || '-'}</Text>
</div>
</div>
)}
{description && (
<Text size="xs" variant="low" lineClamp={2} block leading="relaxed">
{description}
</Text> </Text>
</Box> )}
<Box display="flex" alignItems="center" gap={1}>
<Text size="xs" variant="low" weight="bold" uppercase>VIEW</Text> {/* Footer: Metadata */}
<Icon icon={ChevronRight} size={3} intent="low" /> <div className="flex items-center justify-between pt-4 border-t border-[var(--ui-color-border-muted)]">
</Box> <div className="flex items-center gap-4">
</Box> <div className="flex items-center gap-1.5">
<Icon icon={Users} size={3} intent="low" />
<Text size="xs" variant="low" mono>{memberCount}</Text>
</div>
<div className="flex items-center gap-1.5">
<Icon icon={Globe} size={3} intent="low" />
<Text size="xs" variant="low" mono>{region}</Text>
</div>
</div>
<div className="flex items-center gap-1 text-[var(--ui-color-intent-primary)]">
<Text size="xs" weight="bold" uppercase mono>Details</Text>
<Icon icon={ChevronRight} size={3} />
</div>
</div>
</div>
</Card> </Card>
); );
}; };

33
apps/website/ui/TeamsHeader.tsx Normal file
View File

@@ -0,0 +1,33 @@
import React, { ReactNode } from 'react';
import { Heading } from './Heading';
import { Text } from './Text';
interface TeamsHeaderProps {
title: string;
subtitle?: string;
action?: ReactNode;
}
export function TeamsHeader({ title, subtitle, action }: TeamsHeaderProps) {
return (
<div className="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-6 border-b border-[var(--ui-color-border-muted)] pb-8">
<div className="space-y-2">
<div className="flex items-center gap-3">
<div className="w-1 h-8 bg-[var(--ui-color-intent-primary)]" />
<Heading level={1} weight="bold" uppercase>{title}</Heading>
</div>
{subtitle && (
<Text variant="low" size="lg" uppercase mono className="tracking-[0.2em]">
{subtitle}
</Text>
)}
</div>
{action && (
<div className="flex items-center">
{action}
</div>
)}
</div>
);
}

26
apps/website/ui/Text.tsx
View File

@@ -1,4 +1,5 @@
import React, { ElementType, ReactNode, forwardRef } from 'react'; import React, { ElementType, ReactNode, forwardRef, CSSProperties } from 'react';
import { ResponsiveValue } from './Box';
export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'base'; export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'base';
@@ -15,7 +16,7 @@ export interface TextProps {
block?: boolean; block?: boolean;
truncate?: boolean; truncate?: boolean;
className?: string; className?: string;
style?: React.CSSProperties; style?: CSSProperties;
mt?: number | any; mt?: number | any;
mb?: number | any; mb?: number | any;
ml?: number | any; ml?: number | any;
@@ -29,7 +30,7 @@ export interface TextProps {
flexGrow?: number; flexGrow?: number;
flexShrink?: number; flexShrink?: number;
lineClamp?: number; lineClamp?: number;
display?: string; display?: string | ResponsiveValue<string | any>;
opacity?: number; opacity?: number;
maxWidth?: string | number; maxWidth?: string | number;
mx?: string | number; mx?: string | number;
@@ -170,6 +171,20 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
loose: 'leading-loose', loose: 'leading-loose',
}; };
const getResponsiveClasses = (prefix: string, value: any | ResponsiveValue<any> | undefined) => {
if (value === undefined) return '';
if (typeof value === 'object') {
const classes = [];
if (value.base !== undefined) classes.push(prefix ? `${prefix}-${value.base}` : String(value.base));
if (value.sm !== undefined) classes.push(prefix ? `sm:${prefix}-${value.sm}` : `sm:${value.sm}`);
if (value.md !== undefined) classes.push(prefix ? `md:${prefix}-${value.md}` : `md:${value.md}`);
if (value.lg !== undefined) classes.push(prefix ? `lg:${prefix}-${value.lg}` : `lg:${value.lg}`);
if (value.xl !== undefined) classes.push(prefix ? `xl:${prefix}-${value.xl}` : `xl:${value.xl}`);
return classes.join(' ');
}
return prefix ? `${prefix}-${value}` : String(value);
};
const classes = [ const classes = [
variantClasses[variant as keyof typeof variantClasses] || '', variantClasses[variant as keyof typeof variantClasses] || '',
getResponsiveSize(size), getResponsiveSize(size),
@@ -180,6 +195,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
leadingClasses[leading as keyof typeof leadingClasses] || '', leadingClasses[leading as keyof typeof leadingClasses] || '',
block ? 'block' : 'inline', block ? 'block' : 'inline',
truncate ? 'truncate' : '', truncate ? 'truncate' : '',
getResponsiveClasses('display', display),
transition ? 'transition-all duration-200' : '', transition ? 'transition-all duration-200' : '',
italic ? 'italic' : '', italic ? 'italic' : '',
animate === 'pulse' ? 'animate-pulse' : '', animate === 'pulse' ? 'animate-pulse' : '',
@@ -189,7 +205,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
const combinedStyle: React.CSSProperties = { const combinedStyle: React.CSSProperties = {
...style, ...style,
...(display ? { display } : {}), ...(typeof display === 'string' ? { display } : {}),
...(alignItems ? { alignItems } : {}), ...(alignItems ? { alignItems } : {}),
...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}), ...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
...(cursor ? { cursor } : {}), ...(cursor ? { cursor } : {}),
@@ -219,7 +235,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
...(transform ? { textTransform: transform as any } : {}), ...(transform ? { textTransform: transform as any } : {}),
}; };
const Tag = as; const Tag = as || 'p';
return ( return (
<Tag ref={ref} className={classes} style={combinedStyle} aria-label={ariaLabel} htmlFor={htmlFor}> <Tag ref={ref} className={classes} style={combinedStyle} aria-label={ariaLabel} htmlFor={htmlFor}>