148 lines
3.8 KiB
TypeScript
148 lines
3.8 KiB
TypeScript
|
|
|
|
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
|
|
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { SkillLevelButton } from '@/components/drivers/SkillLevelButton';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { TeamHeroSection as UiTeamHeroSection } from '@/components/teams/TeamHeroSection';
|
|
import { TeamHeroStats } from '@/components/teams/TeamHeroStats';
|
|
import { Text } from '@/ui/Text';
|
|
import {
|
|
Crown,
|
|
LucideIcon,
|
|
Plus,
|
|
Search,
|
|
Shield,
|
|
Star,
|
|
TrendingUp,
|
|
} from 'lucide-react';
|
|
|
|
type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
|
|
|
|
interface SkillLevelConfig {
|
|
id: SkillLevel;
|
|
label: string;
|
|
icon: LucideIcon;
|
|
color: string;
|
|
bgColor: string;
|
|
borderColor: string;
|
|
description: string;
|
|
}
|
|
|
|
const SKILL_LEVELS: SkillLevelConfig[] = [
|
|
{
|
|
id: 'pro',
|
|
label: 'Pro',
|
|
icon: Crown,
|
|
color: 'text-warning-amber',
|
|
bgColor: 'bg-yellow-400/10',
|
|
borderColor: 'border-yellow-400/30',
|
|
description: 'Elite competition, sponsored teams',
|
|
},
|
|
{
|
|
id: 'advanced',
|
|
label: 'Advanced',
|
|
icon: Star,
|
|
color: 'text-purple-400',
|
|
bgColor: 'bg-purple-900/10',
|
|
borderColor: 'border-purple-900/30',
|
|
description: 'Competitive racing, high consistency',
|
|
},
|
|
{
|
|
id: 'intermediate',
|
|
label: 'Intermediate',
|
|
icon: TrendingUp,
|
|
color: 'text-primary-blue',
|
|
bgColor: 'bg-blue-900/10',
|
|
borderColor: 'border-blue-900/30',
|
|
description: 'Growing skills, regular practice',
|
|
},
|
|
{
|
|
id: 'beginner',
|
|
label: 'Beginner',
|
|
icon: Shield,
|
|
color: 'text-performance-green',
|
|
bgColor: 'bg-green-900/10',
|
|
borderColor: 'border-green-900/30',
|
|
description: 'Learning the basics, friendly environment',
|
|
},
|
|
];
|
|
|
|
interface TeamHeroSectionProps {
|
|
teams: TeamSummaryViewModel[];
|
|
teamsByLevel: Record<string, TeamSummaryViewModel[]>;
|
|
recruitingCount: number;
|
|
onShowCreateForm: () => void;
|
|
onBrowseTeams: () => void;
|
|
onSkillLevelClick: (level: SkillLevel) => void;
|
|
}
|
|
|
|
export function TeamHeroSection({
|
|
teams,
|
|
teamsByLevel,
|
|
recruitingCount,
|
|
onShowCreateForm,
|
|
onBrowseTeams,
|
|
onSkillLevelClick,
|
|
}: TeamHeroSectionProps) {
|
|
return (
|
|
<UiTeamHeroSection
|
|
title={
|
|
<>
|
|
Find Your
|
|
<Text color="text-purple-400"> Crew</Text>
|
|
</>
|
|
}
|
|
description="Solo racing is great. Team racing is unforgettable. Join a team that matches your skill level and ambitions."
|
|
statsContent={
|
|
<TeamHeroStats teamCount={teams.length} recruitingCount={recruitingCount} />
|
|
}
|
|
actionsContent={
|
|
<>
|
|
<Button
|
|
variant="primary"
|
|
onClick={onShowCreateForm}
|
|
icon={<Icon icon={Plus} size={4} />}
|
|
bg="bg-purple-600"
|
|
>
|
|
Create Team
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onBrowseTeams}
|
|
icon={<Icon icon={Search} size={4} />}
|
|
>
|
|
Browse Teams
|
|
</Button>
|
|
</>
|
|
}
|
|
sideContent={
|
|
<>
|
|
<Text size="xs" color="text-gray-500" weight="medium" block mb={3} uppercase letterSpacing="0.05em">
|
|
Find Your Level
|
|
</Text>
|
|
<Stack gap={2}>
|
|
{SKILL_LEVELS.map((level) => {
|
|
const count = teamsByLevel[level.id]?.length || 0;
|
|
|
|
return (
|
|
<SkillLevelButton
|
|
key={level.id}
|
|
label={level.label}
|
|
icon={level.icon}
|
|
color={level.color}
|
|
bgColor={level.bgColor}
|
|
borderColor={level.borderColor}
|
|
count={count}
|
|
onClick={() => onSkillLevelClick(level.id)}
|
|
/>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
}
|