70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Users } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Container } from '@/ui/Container';
|
|
import { EmptyState } from '@/components/shared/state/EmptyState';
|
|
import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
|
|
import { TeamGrid } from '@/components/teams/TeamGrid';
|
|
import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
|
|
import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
|
|
|
|
interface TeamsTemplateProps {
|
|
viewData: TeamsViewData;
|
|
onTeamClick?: (teamId: string) => void;
|
|
onViewFullLeaderboard: () => void;
|
|
onCreateTeam: () => void;
|
|
}
|
|
|
|
export function TeamsTemplate({ viewData, onTeamClick, onViewFullLeaderboard, onCreateTeam }: TeamsTemplateProps) {
|
|
const { teams } = viewData;
|
|
|
|
return (
|
|
<Box as="main" bg="base-black" minH="screen">
|
|
<Container size="lg" py={12}>
|
|
<Stack gap={10}>
|
|
<TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
|
|
|
|
<Box>
|
|
<Stack direction="row" align="center" gap={2} mb={6}>
|
|
<Box w="2" h="2" bg="primary-accent" />
|
|
<Text size="xs" weight="bold" color="text-gray-400" uppercase>Active Rosters</Text>
|
|
</Stack>
|
|
|
|
{teams.length > 0 ? (
|
|
<TeamGrid teams={teams} onTeamClick={onTeamClick} />
|
|
) : (
|
|
<EmptyState
|
|
icon={Users}
|
|
title="No teams yet"
|
|
description="Get started by creating your first racing team"
|
|
action={{
|
|
label: 'Create Team',
|
|
onClick: onCreateTeam,
|
|
variant: 'primary'
|
|
}}
|
|
/>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Team Leaderboard Preview */}
|
|
<Box pt={10} borderTop borderColor="outline-steel" borderOpacity={0.3}>
|
|
<Stack direction="row" align="center" gap={2} mb={6}>
|
|
<Box w="2" h="2" bg="telemetry-aqua" />
|
|
<Text size="xs" weight="bold" color="text-gray-400" uppercase>Global Standings</Text>
|
|
</Stack>
|
|
<TeamLeaderboardPreview
|
|
topTeams={[]}
|
|
onTeamClick={(id) => onTeamClick?.(id)}
|
|
onViewFullLeaderboard={onViewFullLeaderboard}
|
|
/>
|
|
</Box>
|
|
</Stack>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|