website refactor

apps/website/components/teams/SkillLevelSection.tsx

@@ -1,6 +1,11 @@
-import { useState } from 'react';
-import { ChevronRight, Users, Trophy, UserPlus } from 'lucide-react';
-import { TeamCard } from './TeamCard';
+'use client';
+
+import React, { useState } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { TeamCard } from '@/ui/TeamCardWrapper';
+import { SkillLevelHeader } from '@/ui/SkillLevelHeader';
+import { TeamGrid } from '@/ui/TeamGrid';
+import { Box } from '@/ui/Box';
 
 type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
 type TeamSpecialization = 'endurance' | 'sprint' | 'mixed';
@@ -8,7 +13,7 @@ type TeamSpecialization = 'endurance' | 'sprint' | 'mixed';
 interface SkillLevelConfig {
   id: SkillLevel;
   label: string;
-  icon: React.ElementType;
+  icon: LucideIcon;
   color: string;
   bgColor: string;
   borderColor: string;
@@ -37,7 +42,7 @@ interface SkillLevelSectionProps {
   defaultExpanded?: boolean;
 }
 
-export default function SkillLevelSection({
+export function SkillLevelSection({
   level,
   teams,
   onTeamClick,
@@ -46,7 +51,6 @@ export default function SkillLevelSection({
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
   const recruitingTeams = teams.filter((t) => t.isRecruiting);
   const displayedTeams = isExpanded ? teams : teams.slice(0, 3);
-  const Icon = level.icon;
 
   if (teams.length === 0) return null;
 
@@ -58,44 +62,22 @@ export default function SkillLevelSection({
   };
 
   return (
-    <div className="mb-8">
-      {/* Section Header */}
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-3">
-          <div className={`flex h-11 w-11 items-center justify-center rounded-xl ${level.bgColor} border ${level.borderColor}`}>
-            <Icon className={`w-5 h-5 ${level.color}`} />
-          </div>
-          <div>
-            <div className="flex items-center gap-2">
-              <h2 className="text-xl font-bold text-white">{level.label}</h2>
-              <span className="px-2 py-0.5 rounded-full text-xs bg-charcoal-outline/50 text-gray-400">
-                {teams.length} {teams.length === 1 ? 'team' : 'teams'}
-              </span>
-              {recruitingTeams.length > 0 && (
-                <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-performance-green/10 text-performance-green border border-performance-green/20">
-                  <UserPlus className="w-3 h-3" />
-                  {recruitingTeams.length} recruiting
-                </span>
-              )}
-            </div>
-            <p className="text-sm text-gray-500">{level.description}</p>
-          </div>
-        </div>
+    <Box mb={8}>
+      <SkillLevelHeader
+        label={level.label}
+        icon={level.icon}
+        bgColor={level.bgColor}
+        borderColor={level.borderColor}
+        color={level.color}
+        description={level.description}
+        teamCount={teams.length}
+        recruitingCount={recruitingTeams.length}
+        isExpanded={isExpanded}
+        onToggle={() => setIsExpanded(!isExpanded)}
+        showToggle={teams.length > 3}
+      />
 
-        {teams.length > 3 && (
-          <button
-            type="button"
-            onClick={() => setIsExpanded(!isExpanded)}
-            className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm text-gray-400 hover:text-white hover:bg-iron-gray/50 transition-all"
-          >
-            {isExpanded ? 'Show less' : `View all ${teams.length}`}
-            <ChevronRight className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-90' : ''}`} />
-          </button>
-        )}
-      </div>
-
-      {/* Teams Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <TeamGrid>
         {displayedTeams.map((team) => (
           <TeamCard
             key={team.id}
@@ -116,7 +98,7 @@ export default function SkillLevelSection({
             onClick={() => onTeamClick(team.id)}
           />
         ))}
-      </div>
-    </div>
+      </TeamGrid>
+    </Box>
   );
-}
+}