website refactor
This commit is contained in:
@@ -1,102 +1,82 @@
|
||||
'use client';
|
||||
|
||||
import { Trophy, Users } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import React from 'react';
|
||||
import { Users } from 'lucide-react';
|
||||
import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreview';
|
||||
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 '@/components/teams/TeamCard';
|
||||
import { EmptyState } from '@/components/shared/state/EmptyState';
|
||||
import type { TeamSummaryData, TeamsViewData } from '@/lib/view-data/TeamsViewData';
|
||||
|
||||
import TeamLeaderboardPreview from '@/components/teams/TeamLeaderboardPreview';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import type { TeamSummaryData, TeamsViewData } from '../lib/view-data/TeamsViewData';
|
||||
|
||||
interface TeamsTemplateProps extends TeamsViewData {
|
||||
searchQuery?: string;
|
||||
showCreateForm?: boolean;
|
||||
onSearchChange?: (query: string) => void;
|
||||
onShowCreateForm?: () => void;
|
||||
onHideCreateForm?: () => void;
|
||||
interface TeamsTemplateProps {
|
||||
viewData: TeamsViewData;
|
||||
onTeamClick?: (teamId: string) => void;
|
||||
onCreateSuccess?: (teamId: string) => void;
|
||||
onBrowseTeams?: () => void;
|
||||
onSkillLevelClick?: (level: string) => void;
|
||||
onViewFullLeaderboard: () => void;
|
||||
onCreateTeam: () => void;
|
||||
}
|
||||
|
||||
export function TeamsTemplate({ teams }: TeamsTemplateProps) {
|
||||
export function TeamsTemplate({ viewData, onTeamClick, onViewFullLeaderboard, onCreateTeam }: TeamsTemplateProps) {
|
||||
const { teams } = viewData;
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-deep-graphite py-8">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Teams</h1>
|
||||
<p className="text-gray-400">Browse and manage your racing teams</p>
|
||||
</div>
|
||||
<Link href=routes.team.detail('create')>
|
||||
<Button variant="primary">Create Team</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<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 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{teams.map((team: TeamSummaryData) => (
|
||||
<Card key={team.teamId} className="hover:border-primary-blue/50 transition-colors">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{team.logoUrl ? (
|
||||
<img
|
||||
src={team.logoUrl}
|
||||
alt={team.teamName}
|
||||
className="w-12 h-12 rounded-lg object-cover bg-iron-gray"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-12 h-12 rounded-lg bg-iron-gray flex items-center justify-center">
|
||||
<Users className="w-6 h-6 text-gray-500" />
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">{team.teamName}</h3>
|
||||
<p className="text-sm text-gray-400">{team.leagueName}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400 mb-4">
|
||||
<span className="flex items-center gap-1">
|
||||
<Users className="w-4 h-4" />
|
||||
{team.memberCount} members
|
||||
</span>
|
||||
</div>
|
||||
{/* 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'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Link href={`/teams/${team.teamId}`} className="flex-1">
|
||||
<Button variant="secondary" className="w-full text-sm">
|
||||
View Team
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-16">
|
||||
<Users className="w-16 h-16 text-gray-600 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-white mb-2">No teams yet</h3>
|
||||
<p className="text-gray-400 mb-4">Get started by creating your first racing team</p>
|
||||
<Link href=routes.team.detail('create')>
|
||||
<Button variant="primary">Create Team</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Team Leaderboard Preview */}
|
||||
<div className="mt-12">
|
||||
<h2 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
|
||||
<Trophy className="w-6 h-6 text-yellow-400" />
|
||||
Top Teams
|
||||
</h2>
|
||||
<TeamLeaderboardPreview topTeams={[]} onTeamClick={() => {}} />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{/* Team Leaderboard Preview */}
|
||||
<Box mt={12}>
|
||||
<TeamLeaderboardPreview
|
||||
topTeams={[]}
|
||||
onTeamClick={(id) => onTeamClick?.(id)}
|
||||
onViewFullLeaderboard={onViewFullLeaderboard}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user