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';
import React from 'react';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { TeamsTemplate } from '@/templates/TeamsTemplate';
import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
@@ -12,6 +12,7 @@ interface TeamsPageClientProps {
export function TeamsPageClient({ viewData }: TeamsPageClientProps) {
const router = useRouter();
const [searchQuery, setSearchQuery] = useState('');
const handleTeamClick = (teamId: string) => {
router.push(`/teams/${teamId}`);
@@ -28,6 +29,8 @@ export function TeamsPageClient({ viewData }: TeamsPageClientProps) {
return (
<TeamsTemplate
viewData={viewData}
searchQuery={searchQuery}
onSearchChange={setSearchQuery}
onTeamClick={handleTeamClick}
onViewFullLeaderboard={handleViewFullLeaderboard}
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 { Text } from '@/ui/Text';
import { TextArea } from '@/ui/TextArea';
import { SectionHeader } from '@/ui/SectionHeader';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import React, { useState } from 'react';
@@ -40,14 +38,12 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
description: team.description || '',
});
// Use hooks for data fetching
const { data: joinRequests = [], isLoading: loading } = useTeamJoinRequests(
team.id,
team.ownerId,
true
);
// Use hooks for mutations
const updateTeamMutation = useUpdateTeam({
onSuccess: () => {
setEditMode(false);
@@ -96,17 +92,22 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
};
return (
<Stack gap={6}>
<Stack gap="lg">
<Panel
title="Team Settings"
actions={!editMode && (
<Button variant="secondary" size="sm" onClick={() => setEditMode(true)}>
Edit Details
</Button>
)}
variant="default"
padding="md"
>
<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 ? (
<Stack gap={4}>
<Stack gap="md">
<Input
label="Team Name"
value={editedTeam.name}
@@ -128,7 +129,7 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
onChange={(e) => setEditedTeam({ ...editedTeam, description: e.target.value })}
/>
<Group gap={2}>
<Box display="flex" gap="sm">
<Button variant="primary" onClick={handleSaveChanges} disabled={updateTeamMutation.isPending}>
{updateTeamMutation.isPending ? 'Saving...' : 'Save Changes'}
</Button>
@@ -145,27 +146,30 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
>
Cancel
</Button>
</Group>
</Box>
</Stack>
) : (
<Stack gap={4}>
<Stack gap={1}>
<Text size="sm" variant="low" block>Team Name</Text>
<Text variant="high" weight="medium" block>{team.name}</Text>
<Stack gap="md">
<Stack gap="xs">
<Text size="xs" variant="low" uppercase>Team Name</Text>
<Text weight="bold">{team.name}</Text>
</Stack>
<Stack gap={1}>
<Text size="sm" variant="low" block>Team Tag</Text>
<Text variant="high" weight="medium" block>{team.tag}</Text>
<Stack gap="xs">
<Text size="xs" variant="low" uppercase>Team Tag</Text>
<Text weight="bold">{team.tag}</Text>
</Stack>
<Stack gap={1}>
<Text size="sm" variant="low" block>Description</Text>
<Text variant="high" block>{team.description}</Text>
<Stack gap="xs">
<Text size="xs" variant="low" uppercase>Description</Text>
<Text variant="med">{team.description}</Text>
</Stack>
</Stack>
)}
</Panel>
<Panel title="Join Requests">
<Panel variant="default" padding="md">
<Box marginBottom={6}>
<Heading level={3} uppercase>Join Requests</Heading>
</Box>
{loading ? (
<LoadingWrapper variant="spinner" message="Loading requests..." />
) : joinRequests.length > 0 ? (
@@ -202,3 +206,5 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
</Stack>
);
}
import { Heading } from '@/ui/Heading';

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

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

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

@@ -4,11 +4,9 @@ import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';
import { Group } from '@/ui/Group';
import { Text } from '@/ui/Text';
import { BadgeGroup } from '@/ui/BadgeGroup';
import {
Clock,
Crown,
Languages,
Shield,
Star,
TrendingUp,
@@ -34,35 +32,8 @@ interface TeamCardProps {
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({
name,
description,
logo,
memberCount,
ratingLabel,
@@ -70,53 +41,21 @@ export function TeamCard({
racesLabel,
performanceLevel,
isRecruiting,
specialization,
region,
languages,
category,
onClick,
}: TeamCardProps) {
const performanceBadge = getPerformanceBadge(performanceLevel);
const specializationBadge = getSpecializationBadge(specialization);
return (
<UiTeamCard
name={name}
description={description}
logo={logo}
memberCount={memberCount}
ratingLabel={ratingLabel}
winsLabel={winsLabel}
racesLabel={racesLabel}
isRecruiting={isRecruiting}
onClick={onClick}
region={region}
performanceBadge={performanceBadge && (
<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>
}
performanceLevel={performanceLevel}
/>
);
}

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

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

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

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

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

@@ -1,10 +1,9 @@
'use client';
import { Icon } from '@/ui/Icon';
import { Input } from '@/ui/Input';
import { Search } from 'lucide-react';
import { Box } from '@/ui/Box';
import React from 'react';
interface TeamSearchBarProps {
@@ -14,13 +13,16 @@ interface TeamSearchBarProps {
export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
return (
<Input
type="text"
placeholder="Search teams by name, description, region, or language..."
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
icon={<Icon icon={Search} size={5} intent="low" />}
fullWidth
/>
<Box marginBottom={8}>
<Input
type="text"
placeholder="FILTER BY TEAM NAME, REGION OR TAGS..."
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
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';
import React from 'react';
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 { Surface } from '@/ui/Surface';
interface Standing {
leagueId: string;
@@ -18,9 +20,9 @@ interface TeamStandingsPanelProps {
export function TeamStandingsPanel({ standings }: TeamStandingsPanelProps) {
return (
<Box border borderColor="outline-steel" bg="surface-charcoal/30">
<Box p={4} borderBottom borderColor="outline-steel">
<Text size="xs" weight="bold" color="text-gray-400" uppercase letterSpacing="widest">
<Surface variant="precision" padding="none">
<Box padding={6} borderBottom="1px solid var(--ui-color-border-muted)">
<Text size="xs" weight="bold" variant="low" uppercase letterSpacing="0.1em">
Active Campaign Standings
</Text>
</Box>
@@ -28,51 +30,49 @@ export function TeamStandingsPanel({ standings }: TeamStandingsPanelProps) {
{standings.length > 0 ? (
<Table>
<TableHead>
<TableRow>
<TableHeader>League</TableHeader>
<TableHeader textAlign="center">Pos</TableHeader>
<TableHeader textAlign="center">Races</TableHeader>
<TableHeader textAlign="right">Points</TableHeader>
</TableRow>
<TableHeaderCell>League</TableHeaderCell>
<TableHeaderCell textAlign="center">Pos</TableHeaderCell>
<TableHeaderCell textAlign="center">Races</TableHeaderCell>
<TableHeaderCell textAlign="right">Points</TableHeaderCell>
</TableHead>
<TableBody>
{standings.map((s) => (
<TableRow key={s.leagueId}>
<TableCell>
<Text weight="bold" size="sm" color="text-white">{s.leagueName}</Text>
<Text weight="bold" size="sm">{s.leagueName}</Text>
</TableCell>
<TableCell textAlign="center">
<Box
display="inline-flex"
center
w="6"
h="6"
bg={s.position <= 3 ? 'warning-amber/20' : 'base-black'}
border
borderColor={s.position <= 3 ? 'warning-amber/40' : 'outline-steel'}
width={8}
height={8}
bg={s.position <= 3 ? 'rgba(255, 190, 77, 0.1)' : 'var(--ui-color-bg-base)'}
border={s.position <= 3 ? '1px solid var(--ui-color-intent-warning)' : '1px solid var(--ui-color-border-muted)'}
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}
</Text>
</Box>
</TableCell>
<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 textAlign="right">
<Text font="mono" weight="bold" color="telemetry-aqua">{s.points}</Text>
<Text mono weight="bold" variant="telemetry">{s.points}</Text>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
) : (
<Box py={12} textAlign="center">
<Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest">
<Box paddingY={16} textAlign="center">
<Text variant="low" mono size="xs" uppercase letterSpacing="0.1em">
No active campaign telemetry
</Text>
</Box>
)}
</Box>
</Surface>
);
}

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

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

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

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

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

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

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

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

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

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

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

@@ -1,67 +1,119 @@
'use client';
import { TeamCard } from '@/components/teams/TeamCardWrapper';
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 React, { useMemo } from 'react';
import { Users } from 'lucide-react';
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> {
searchQuery: string;
onSearchChange: (query: string) => void;
onTeamClick?: (teamId: string) => void;
onViewFullLeaderboard: () => 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 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 (
<TeamsDirectory>
<TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
<TeamsDirectorySection title="Active Rosters" accentColor="primary-accent">
{teams.length > 0 ? (
<TeamGrid>
{teams.map((team) => (
<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}
<div className="min-h-screen bg-[var(--ui-color-bg-base)] py-12">
<Container size="xl">
<TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
<TeamSearchBar
searchQuery={searchQuery}
onSearchChange={onSearchChange}
/>
</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.
*/
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 {
base?: Spacing;
@@ -82,7 +82,7 @@ export interface BoxProps<T extends ElementType> {
h?: string | number | ResponsiveValue<string | number>;
// 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;
overflow?: 'auto' | 'hidden' | 'visible' | 'scroll' | string;
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',
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',
'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) => {

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

@@ -41,6 +41,12 @@ export interface ButtonProps {
borderWidth?: string | any;
aspectRatio?: string | 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 { Heading } from './Heading';
import { Spacing } from './Box';
export interface CardProps {
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;
footer?: ReactNode;
padding?: 'none' | 'sm' | 'md' | 'lg' | number | any;
padding?: Spacing | number | any;
className?: string;
style?: React.CSSProperties;
bg?: string;
@@ -28,6 +29,9 @@ export interface CardProps {
gap?: number;
py?: number;
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)]',
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)]',
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 = {
@@ -78,7 +89,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
};
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
};
@@ -86,8 +97,8 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
...style,
...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
...(backgroundColor ? { backgroundColor } : {}),
...(p !== undefined ? { padding: `${p * 0.25}rem` } : {}),
...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
...(p !== undefined ? { padding: typeof p === 'number' ? `${p * 0.25}rem` : undefined } : {}),
...(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` } : {}),
...(responsiveColSpan?.lg ? { gridColumn: `span ${responsiveColSpan.lg} / span ${responsiveColSpan.lg}` } : {}),
...(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 {
children: ReactNode;
@@ -8,7 +8,7 @@ export interface HeadingProps {
uppercase?: boolean;
intent?: 'primary' | 'telemetry' | 'warning' | 'critical' | 'default' | any;
className?: string;
style?: React.CSSProperties;
style?: CSSProperties;
mb?: number | any;
marginBottom?: number | any;
mt?: number | any;
@@ -19,6 +19,10 @@ export interface HeadingProps {
truncate?: boolean;
size?: string;
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 { Heading } from './Heading';
import { Text } from './Text';
import React, { ReactNode, CSSProperties } from 'react';
import { Spacing } from './Box';
export interface PanelProps {
title?: string;
description?: string;
children: ReactNode;
footer?: ReactNode;
variant?: 'default' | 'muted' | 'ghost' | 'dark' | any;
padding?: 'none' | 'sm' | 'md' | 'lg' | number | any;
variant?: 'default' | 'muted' | 'outline' | 'glass' | 'dark' | 'precision' | 'bordered' | 'elevated';
padding?: Spacing | number;
onClick?: () => void;
style?: CSSProperties;
title?: string | ReactNode;
actions?: ReactNode;
className?: string;
style?: React.CSSProperties;
description?: string;
footer?: ReactNode;
border?: boolean;
rounded?: string;
className?: string;
borderColor?: string;
bg?: string;
}
/**
* Panel - Redesigned for "Modern Precision" theme.
* Includes compatibility props to prevent app-wide breakage.
*/
export const Panel = ({
title,
description,
export function Panel({
children,
footer,
variant = 'default',
variant = 'default',
padding = 'md',
actions,
className,
onClick,
style,
title,
actions,
description,
footer,
border,
rounded,
borderColor,
bg,
}: PanelProps) => {
className
}: PanelProps) {
const variantClasses = {
default: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)]',
muted: 'bg-[var(--ui-color-bg-surface-muted)] border-[var(--ui-color-border-muted)]',
ghost: 'bg-transparent border-transparent',
dark: 'bg-[var(--ui-color-bg-base)] 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 border-[var(--ui-color-border-muted)]',
outline: 'bg-transparent border 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 = {
none: 'p-0',
sm: 'p-2',
md: 'p-4',
lg: 'p-8',
xs: 'p-2',
sm: 'p-4',
md: 'p-6',
lg: 'p-10',
};
const getPaddingClass = (pad: any) => {
if (typeof pad === 'string') return paddingClasses[pad as keyof typeof paddingClasses] || paddingClasses.md;
return ''; // Handled in style
const getPaddingClass = (p: any) => {
if (typeof p === 'string') return `p-${p}`;
return '';
};
const combinedStyle: React.CSSProperties = {
...style,
...(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' } : {}),
};
const interactiveClasses = onClick
? 'cursor-pointer hover:border-[var(--ui-color-border-bright)] transition-all duration-200 ease-in-out active:scale-[0.99]'
: '';
return (
<div className={`border ${variantClasses[variant as keyof typeof variantClasses] || variantClasses.default} ${getPaddingClass(padding)} transition-all duration-200 ${className || ''}`} style={combinedStyle}>
{(title || description || actions) && (
<div className={`border-b border-[var(--ui-color-border-muted)] flex items-center justify-between ${getPaddingClass(padding)}`}>
<div>
{title && <Heading level={4} weight="semibold" uppercase>{title}</Heading>}
{description && <Text size="xs" variant="low">{description}</Text>}
</div>
{actions && (
<div className="flex items-center gap-2">
{actions}
<div
className={`${variantClasses[variant]} ${getPaddingClass(padding)} ${interactiveClasses} ${rounded ? `rounded-${rounded}` : 'rounded-md'} ${border ? 'border' : ''} ${className || ''}`}
onClick={onClick}
style={{
...style,
...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {})
}}
>
{(title || 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>
)}
{actions && <div>{actions}</div>}
</div>
)}
<div className={typeof padding === 'number' ? '' : getPaddingClass(padding)}>
{children}
</div>
{children}
{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}
</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;
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';
rounded?: keyof ThemeRadii | 'none' | '2xl';
shadow?: keyof ThemeShadows | 'none';
rounded?: keyof ThemeRadii | 'none' | '2xl' | string | boolean;
shadow?: keyof ThemeShadows | 'none' | string;
}
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';
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 (
<thead className={`bg-[var(--ui-color-bg-base)] border-b border-[var(--ui-color-border-default)] ${className || ''}`}>
<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');
return (
<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');
return (
<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 { Badge } from './Badge';
import { Box } from './Box';
import { Card } from './Card';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Text } from './Text';
import { Badge } from './Badge';
export interface TeamCardProps {
name: string;
description?: string;
leagueName?: string;
logo?: ReactNode;
memberCount: number;
isRecruiting?: boolean;
badges?: ReactNode;
rating?: string;
wins?: string;
races?: string;
region?: string;
isRecruiting?: boolean;
performanceLevel?: string;
onClick?: () => void;
description?: string;
}
export const TeamCard = ({
name,
description,
leagueName,
logo,
memberCount,
isRecruiting,
badges,
region,
rating,
wins,
races,
region = 'EU',
isRecruiting,
performanceLevel,
description,
onClick
}: TeamCardProps) => {
return (
<Card
variant="dark"
onClick={onClick}
style={{ cursor: onClick ? 'pointer' : 'default', height: '100%', display: 'flex', flexDirection: 'column' }}
variant="precision"
padding="none"
onClick={onClick}
transition
>
<Box display="flex" gap={4} marginBottom={4}>
<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 }}>
{logo}
</Box>
<Box flex={1} minWidth="0">
<Box display="flex" alignItems="start" justifyContent="between" gap={2}>
<Heading level={4} weight="bold" truncate>{name}</Heading>
{isRecruiting && <Badge variant="success" size="sm">RECRUITING</Badge>}
</Box>
<Box display="flex" gap={2} flexWrap="wrap" marginTop={2}>
{badges}
</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 className="p-6 space-y-6">
{/* Header: Logo and Identity */}
<div className="flex items-center gap-4">
<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)]">
{logo || <Icon icon={Users} size={5} intent="low" />}
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-2">
<Heading level={4} weight="bold" truncate uppercase>{name}</Heading>
{isRecruiting && (
<Badge variant="success" size="xs">RECRUITING</Badge>
)}
</div>
</Badge>
</Box>
)}
<div className="flex items-center gap-2">
{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">
<Box display="flex" alignItems="center" gap={2}>
<Icon icon={Users} size={3} intent="low" />
<Text size="xs" variant="low" font="mono">
{memberCount} {memberCount === 1 ? 'MEMBER' : 'MEMBERS'}
{/* Technical Stats Grid - Engineered Look */}
{(rating || wins || races) && (
<div className="grid grid-cols-3 gap-px bg-[var(--ui-color-border-muted)] border border-[var(--ui-color-border-muted)]">
<div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
<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>
</Box>
<Box display="flex" alignItems="center" gap={1}>
<Text size="xs" variant="low" weight="bold" uppercase>VIEW</Text>
<Icon icon={ChevronRight} size={3} intent="low" />
</Box>
</Box>
)}
{/* Footer: Metadata */}
<div className="flex items-center justify-between pt-4 border-t border-[var(--ui-color-border-muted)]">
<div className="flex items-center gap-4">
<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>
);
};

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';
@@ -15,7 +16,7 @@ export interface TextProps {
block?: boolean;
truncate?: boolean;
className?: string;
style?: React.CSSProperties;
style?: CSSProperties;
mt?: number | any;
mb?: number | any;
ml?: number | any;
@@ -29,7 +30,7 @@ export interface TextProps {
flexGrow?: number;
flexShrink?: number;
lineClamp?: number;
display?: string;
display?: string | ResponsiveValue<string | any>;
opacity?: number;
maxWidth?: string | number;
mx?: string | number;
@@ -170,6 +171,20 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
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 = [
variantClasses[variant as keyof typeof variantClasses] || '',
getResponsiveSize(size),
@@ -180,6 +195,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
leadingClasses[leading as keyof typeof leadingClasses] || '',
block ? 'block' : 'inline',
truncate ? 'truncate' : '',
getResponsiveClasses('display', display),
transition ? 'transition-all duration-200' : '',
italic ? 'italic' : '',
animate === 'pulse' ? 'animate-pulse' : '',
@@ -189,7 +205,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
const combinedStyle: React.CSSProperties = {
...style,
...(display ? { display } : {}),
...(typeof display === 'string' ? { display } : {}),
...(alignItems ? { alignItems } : {}),
...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
...(cursor ? { cursor } : {}),
@@ -219,7 +235,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
...(transform ? { textTransform: transform as any } : {}),
};
const Tag = as;
const Tag = as || 'p';
return (
<Tag ref={ref} className={classes} style={combinedStyle} aria-label={ariaLabel} htmlFor={htmlFor}>