wip

apps/website/components/teams/TeamCard.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import Card from '../ui/Card';
+
+interface TeamCardProps {
+  id: string;
+  name: string;
+  logo?: string;
+  memberCount: number;
+  leagues: string[];
+  performanceLevel?: 'beginner' | 'intermediate' | 'advanced' | 'pro';
+  onClick?: () => void;
+}
+
+export default function TeamCard({
+  id,
+  name,
+  logo,
+  memberCount,
+  leagues,
+  performanceLevel,
+  onClick,
+}: TeamCardProps) {
+  const performanceBadgeColors = {
+    beginner: 'bg-green-500/20 text-green-400',
+    intermediate: 'bg-blue-500/20 text-blue-400',
+    advanced: 'bg-purple-500/20 text-purple-400',
+    pro: 'bg-red-500/20 text-red-400',
+  };
+
+  return (
+    <div
+      className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
+      onClick={onClick}
+    >
+      <Card>
+        <div className="space-y-4">
+          <div className="flex items-start gap-4">
+            <div className="w-16 h-16 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0">
+              {logo ? (
+                <img src={logo} alt={name} className="w-full h-full object-cover rounded-lg" />
+              ) : (
+                <span className="text-2xl font-bold text-gray-500">
+                  {name.charAt(0)}
+                </span>
+              )}
+            </div>
+            <div className="flex-1 min-w-0">
+              <h3 className="text-lg font-semibold text-white truncate">
+                {name}
+              </h3>
+              <p className="text-sm text-gray-400">
+                {memberCount} {memberCount === 1 ? 'member' : 'members'}
+              </p>
+            </div>
+          </div>
+
+          {performanceLevel && (
+            <div>
+              <span
+                className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
+                  performanceBadgeColors[performanceLevel]
+                }`}
+              >
+                {performanceLevel.charAt(0).toUpperCase() + performanceLevel.slice(1)}
+              </span>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <p className="text-sm font-medium text-gray-400">Active in:</p>
+            <div className="flex flex-wrap gap-2">
+              {leagues.slice(0, 3).map((league, idx) => (
+                <span
+                  key={idx}
+                  className="inline-block px-2 py-1 bg-charcoal-outline text-gray-300 rounded text-xs"
+                >
+                  {league}
+                </span>
+              ))}
+              {leagues.length > 3 && (
+                <span className="inline-block px-2 py-1 bg-charcoal-outline text-gray-400 rounded text-xs">
+                  +{leagues.length - 3} more
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}