website refactor
This commit is contained in:
@@ -1,48 +1,15 @@
|
||||
import Image from 'next/image';
|
||||
import { UserPlus, Users, Trophy } from 'lucide-react';
|
||||
import { getMediaUrl } from '@/lib/utilities/media';
|
||||
'use client';
|
||||
|
||||
const SKILL_LEVELS: {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
color: string;
|
||||
bgColor: string;
|
||||
borderColor: string;
|
||||
}[] = [
|
||||
{
|
||||
id: 'pro',
|
||||
label: 'Pro',
|
||||
icon: () => null,
|
||||
color: 'text-yellow-400',
|
||||
bgColor: 'bg-yellow-400/10',
|
||||
borderColor: 'border-yellow-400/30',
|
||||
},
|
||||
{
|
||||
id: 'advanced',
|
||||
label: 'Advanced',
|
||||
icon: () => null,
|
||||
color: 'text-purple-400',
|
||||
bgColor: 'bg-purple-400/10',
|
||||
borderColor: 'border-purple-400/30',
|
||||
},
|
||||
{
|
||||
id: 'intermediate',
|
||||
label: 'Intermediate',
|
||||
icon: () => null,
|
||||
color: 'text-primary-blue',
|
||||
bgColor: 'bg-primary-blue/10',
|
||||
borderColor: 'border-primary-blue/30',
|
||||
},
|
||||
{
|
||||
id: 'beginner',
|
||||
label: 'Beginner',
|
||||
icon: () => null,
|
||||
color: 'text-green-400',
|
||||
bgColor: 'bg-green-400/10',
|
||||
borderColor: 'border-green-400/30',
|
||||
},
|
||||
];
|
||||
import React from 'react';
|
||||
import { UserPlus } from 'lucide-react';
|
||||
import { getMediaUrl } from '@/lib/utilities/media';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { RecruitingTeamGrid } from '@/ui/RecruitingTeamGrid';
|
||||
import { RecruitingTeamCard } from '@/ui/RecruitingTeamCard';
|
||||
|
||||
interface FeaturedRecruitingProps {
|
||||
teams: Array<{
|
||||
@@ -59,75 +26,46 @@ interface FeaturedRecruitingProps {
|
||||
onTeamClick: (id: string) => void;
|
||||
}
|
||||
|
||||
export default function FeaturedRecruiting({ teams, onTeamClick }: FeaturedRecruitingProps) {
|
||||
export function FeaturedRecruiting({ teams, onTeamClick }: FeaturedRecruitingProps) {
|
||||
const recruitingTeams = teams.filter((t) => t.isRecruiting).slice(0, 4);
|
||||
|
||||
if (recruitingTeams.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="mb-10">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-performance-green/10 border border-performance-green/20">
|
||||
<UserPlus className="w-5 h-5 text-performance-green" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">Looking for Drivers</h2>
|
||||
<p className="text-xs text-gray-500">Teams actively recruiting new members</p>
|
||||
</div>
|
||||
</div>
|
||||
<Box mb={10}>
|
||||
<Stack direction="row" align="center" gap={3} mb={4}>
|
||||
<Box
|
||||
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" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading level={2}>Looking for Drivers</Heading>
|
||||
<Text size="xs" color="text-gray-500">Teams actively recruiting new members</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{recruitingTeams.map((team) => {
|
||||
const levelConfig = SKILL_LEVELS.find((l) => l.id === team.performanceLevel);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={team.id}
|
||||
type="button"
|
||||
onClick={() => onTeamClick(team.id)}
|
||||
className="p-4 rounded-xl bg-iron-gray/60 border border-charcoal-outline hover:border-performance-green/40 transition-all duration-200 text-left group"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-charcoal-outline border border-charcoal-outline overflow-hidden">
|
||||
<Image
|
||||
src={team.logoUrl || getMediaUrl('team-logo', team.id)}
|
||||
alt={team.name}
|
||||
width={32}
|
||||
height={32}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] bg-performance-green/10 text-performance-green border border-performance-green/20">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-performance-green animate-pulse" />
|
||||
Recruiting
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-white font-semibold mb-1 group-hover:text-performance-green transition-colors line-clamp-1">
|
||||
{team.name}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 line-clamp-2 mb-3">{team.description}</p>
|
||||
|
||||
<div className="flex items-center gap-2 text-xs text-gray-400 flex-wrap">
|
||||
{team.category && (
|
||||
<span className="flex items-center gap-1 text-purple-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
|
||||
{team.category}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<Users className="w-3 h-3" />
|
||||
{team.memberCount}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Trophy className="w-3 h-3" />
|
||||
{team.totalWins} wins
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user