102 lines
3.9 KiB
TypeScript
102 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { Trophy, Users } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
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;
|
|
onTeamClick?: (teamId: string) => void;
|
|
onCreateSuccess?: (teamId: string) => void;
|
|
onBrowseTeams?: () => void;
|
|
onSkillLevelClick?: (level: string) => void;
|
|
}
|
|
|
|
export function TeamsTemplate({ teams }: TeamsTemplateProps) {
|
|
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="/teams/create">
|
|
<Button variant="primary">Create Team</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* 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>
|
|
|
|
<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="/teams/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>
|
|
);
|
|
} |