83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Users } from 'lucide-react';
|
|
import { TeamLeaderboardPreview } from '@/ui/TeamLeaderboardPreviewWrapper';
|
|
import { Button } from '@/ui/Button';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Container } from '@/ui/Container';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { TeamCard } from '@/ui/TeamCardWrapper';
|
|
import { EmptyState } from '@/ui/EmptyState';
|
|
import type { TeamSummaryData, 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">
|
|
<Container size="lg" py={8}>
|
|
<Stack gap={8}>
|
|
{/* Header */}
|
|
<Stack direction="row" align="center" justify="between" wrap gap={4}>
|
|
<Box>
|
|
<Heading level={1}>Teams</Heading>
|
|
<Text color="text-gray-400">Browse and manage your racing teams</Text>
|
|
</Box>
|
|
<Box>
|
|
<Button variant="primary" onClick={onCreateTeam}>Create Team</Button>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{/* Teams Grid */}
|
|
{teams.length > 0 ? (
|
|
<Grid cols={3} gap={6}>
|
|
{teams.map((team: TeamSummaryData) => (
|
|
<TeamCard
|
|
key={team.teamId}
|
|
id={team.teamId}
|
|
name={team.teamName}
|
|
logo={team.logoUrl}
|
|
memberCount={team.memberCount}
|
|
leagues={[team.leagueName]}
|
|
onClick={() => onTeamClick?.(team.teamId)}
|
|
/>
|
|
))}
|
|
</Grid>
|
|
) : (
|
|
<EmptyState
|
|
icon={Users}
|
|
title="No teams yet"
|
|
description="Get started by creating your first racing team"
|
|
action={{
|
|
label: 'Create Team',
|
|
onClick: onCreateTeam,
|
|
variant: 'primary'
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Team Leaderboard Preview */}
|
|
<Box mt={12}>
|
|
<TeamLeaderboardPreview
|
|
topTeams={[]}
|
|
onTeamClick={(id) => onTeamClick?.(id)}
|
|
onViewFullLeaderboard={onViewFullLeaderboard}
|
|
/>
|
|
</Box>
|
|
</Stack>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|