wip

apps/website/components/teams/TeamCard.tsx

@@ -13,6 +13,8 @@ import {
   UserPlus,
   Zap,
   Clock,
+  Globe,
+  Languages,
 } from 'lucide-react';
 import { getImageService } from '@/lib/di-container';
 
@@ -28,6 +30,8 @@ interface TeamCardProps {
   performanceLevel?: 'beginner' | 'intermediate' | 'advanced' | 'pro';
   isRecruiting?: boolean;
   specialization?: 'endurance' | 'sprint' | 'mixed';
+  region?: string;
+  languages?: string[];
   leagues?: string[];
   onClick?: () => void;
 }
@@ -70,6 +74,8 @@ export default function TeamCard({
   performanceLevel,
   isRecruiting,
   specialization,
+  region,
+  languages,
   onClick,
 }: TeamCardProps) {
   const imageService = getImageService();
@@ -134,10 +140,29 @@ export default function TeamCard({
         {/* Content */}
         <div className="p-4 flex flex-col flex-1">
           {/* Description */}
-          <p className="text-xs text-gray-500 line-clamp-2 mb-4 h-8">
+          <p className="text-xs text-gray-500 line-clamp-2 mb-3">
             {description || 'No description available'}
           </p>
 
+          {/* Region & Languages */}
+          {(region || (languages && languages.length > 0)) && (
+            <div className="flex flex-wrap items-center gap-2 mb-3">
+              {region && (
+                <span className="flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] bg-charcoal-outline/50 text-gray-400 border border-charcoal-outline/30">
+                  <Globe className="w-3 h-3 text-neon-aqua" />
+                  {region}
+                </span>
+              )}
+              {languages && languages.length > 0 && (
+                <span className="flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] bg-charcoal-outline/50 text-gray-400 border border-charcoal-outline/30">
+                  <Languages className="w-3 h-3 text-purple-400" />
+                  {languages.slice(0, 2).join(', ')}
+                  {languages.length > 2 && ` +${languages.length - 2}`}
+                </span>
+              )}
+            </div>
+          )}
+
           {/* Stats Grid */}
           <div className="grid grid-cols-3 gap-2 mb-4">
             <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">