70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { RecruitingTeamCard } from '@/components/teams/RecruitingTeamCard';
|
|
import { RecruitingTeamGrid } from '@/components/teams/RecruitingTeamGrid';
|
|
import { getMediaUrl } from '@/lib/utilities/media';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { UserPlus } from 'lucide-react';
|
|
|
|
interface FeaturedRecruitingProps {
|
|
teams: Array<{
|
|
id: string;
|
|
name: string;
|
|
description?: string;
|
|
logoUrl?: string;
|
|
category?: string;
|
|
memberCount: number;
|
|
totalWins: number;
|
|
performanceLevel: string;
|
|
isRecruiting: boolean;
|
|
}>;
|
|
onTeamClick: (id: string) => void;
|
|
}
|
|
|
|
export function FeaturedRecruiting({ teams, onTeamClick }: FeaturedRecruitingProps) {
|
|
const recruitingTeams = teams.filter((t) => t.isRecruiting).slice(0, 4);
|
|
|
|
if (recruitingTeams.length === 0) return null;
|
|
|
|
return (
|
|
<Stack mb={10}>
|
|
<Stack direction="row" align="center" gap={3} mb={4}>
|
|
<Stack
|
|
display="flex"
|
|
center
|
|
width="10"
|
|
height="10"
|
|
rounded="xl"
|
|
bg="bg-performance-green/10"
|
|
border={true}
|
|
borderColor="border-performance-green/20"
|
|
>
|
|
<Icon icon={UserPlus} size={5} color="text-performance-green" />
|
|
</Stack>
|
|
<Stack>
|
|
<Heading level={2}>Looking for Drivers</Heading>
|
|
<Text size="xs" color="text-gray-500">Teams actively recruiting new members</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<RecruitingTeamGrid>
|
|
{recruitingTeams.map((team) => (
|
|
<RecruitingTeamCard
|
|
key={team.id}
|
|
name={team.name}
|
|
description={team.description}
|
|
logoUrl={team.logoUrl || getMediaUrl('team-logo', team.id)}
|
|
category={team.category}
|
|
memberCount={team.memberCount}
|
|
totalWins={team.totalWins}
|
|
onClick={() => onTeamClick(team.id)}
|
|
/>
|
|
))}
|
|
</RecruitingTeamGrid>
|
|
</Stack>
|
|
);
|
|
}
|