123 lines
3.0 KiB
TypeScript
123 lines
3.0 KiB
TypeScript
|
|
|
|
'use client';
|
|
|
|
import { SkillLevelButton } from '@/components/drivers/SkillLevelButton';
|
|
import { TeamHeroStats } from '@/components/teams/TeamHeroStats';
|
|
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
|
|
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { TeamHero } from '@/ui/TeamHero';
|
|
import { Text } from '@/ui/Text';
|
|
import {
|
|
Crown,
|
|
Plus,
|
|
Search,
|
|
Shield,
|
|
Star,
|
|
TrendingUp,
|
|
} from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
|
|
|
|
const SKILL_LEVELS = [
|
|
{
|
|
id: 'pro',
|
|
label: 'Pro',
|
|
icon: Crown,
|
|
intent: 'warning' as const,
|
|
},
|
|
{
|
|
id: 'advanced',
|
|
label: 'Advanced',
|
|
icon: Star,
|
|
intent: 'primary' as const,
|
|
},
|
|
{
|
|
id: 'intermediate',
|
|
label: 'Intermediate',
|
|
icon: TrendingUp,
|
|
intent: 'telemetry' as const,
|
|
},
|
|
{
|
|
id: 'beginner',
|
|
label: 'Beginner',
|
|
icon: Shield,
|
|
intent: 'success' as const,
|
|
},
|
|
] as const;
|
|
|
|
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 (
|
|
<TeamHero
|
|
title={
|
|
<React.Fragment>
|
|
Find Your
|
|
<Text as="span" variant="primary"> Crew</Text>
|
|
</React.Fragment>
|
|
}
|
|
description="Solo racing is great. Team racing is unforgettable. Join a team that matches your skill level and ambitions."
|
|
stats={
|
|
<TeamHeroStats teamCount={teams.length} recruitingCount={recruitingCount} />
|
|
}
|
|
actions={
|
|
<React.Fragment>
|
|
<Button
|
|
variant="primary"
|
|
onClick={onShowCreateForm}
|
|
icon={<Icon icon={Plus} size={4} />}
|
|
>
|
|
Create Team
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onBrowseTeams}
|
|
icon={<Icon icon={Search} size={4} />}
|
|
>
|
|
Browse Teams
|
|
</Button>
|
|
</React.Fragment>
|
|
}
|
|
sideContent={
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
<Text size="xs" variant="low" weight="bold" uppercase>
|
|
Find Your Level
|
|
</Text>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
|
{SKILL_LEVELS.map((level) => {
|
|
const count = teamsByLevel[level.id]?.length || 0;
|
|
|
|
return (
|
|
<SkillLevelButton
|
|
key={level.id}
|
|
label={level.label}
|
|
icon={level.icon}
|
|
count={count}
|
|
onClick={() => onSkillLevelClick(level.id as SkillLevel)}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
}
|
|
/>
|
|
);
|
|
}
|