website refactor

apps/website/components/teams/TeamCard.tsx

@@ -1,56 +1,71 @@
 'use client';
- 
-import { TeamLogo } from '@/components/teams/TeamLogo';
-import { TeamCard as UITeamCard } from '@/ui/TeamCard';
-import React, { ReactNode } from 'react';
- 
+
+import React from 'react';
+import { TeamCard as UiTeamCard } from '@/ui/TeamCard';
+import { TeamSummaryData } from '@/lib/view-data/TeamsViewData';
+import { Image } from '@/ui/Image';
+
 interface TeamCardProps {
-  name: string;
-  description?: string;
+  team?: TeamSummaryData;
+  // Compatibility props
+  name?: string;
+  leagueName?: string;
   logo?: string;
-  memberCount: number;
-  isRecruiting?: boolean;
-  performanceBadge?: ReactNode;
-  specializationContent?: ReactNode;
-  categoryBadge?: ReactNode;
+  memberCount?: number;
+  ratingLabel?: string;
+  winsLabel?: string;
+  racesLabel?: string;
   region?: string;
-  languagesContent?: ReactNode;
-  statsContent?: ReactNode;
-  onClick?: () => void;
+  isRecruiting?: boolean;
+  performanceLevel?: string;
+  description?: string;
+  onClick?: (id: string) => void;
 }
- 
-export function TeamCard({
+
+export function TeamCard({ 
+  team, 
   name,
-  description,
+  leagueName,
   logo,
   memberCount,
-  isRecruiting,
-  performanceBadge,
-  specializationContent,
-  categoryBadge,
+  ratingLabel,
+  winsLabel,
+  racesLabel,
   region,
-  languagesContent,
-  onClick,
+  isRecruiting,
+  performanceLevel,
+  description,
+  onClick 
 }: TeamCardProps) {
+  const data = team || {
+    teamId: '',
+    teamName: name || '',
+    leagueName: leagueName || '',
+    memberCount: memberCount || 0,
+    logoUrl: logo,
+    ratingLabel: ratingLabel || '-',
+    winsLabel: winsLabel || '-',
+    racesLabel: racesLabel || '-',
+    region: region,
+    isRecruiting: isRecruiting || false,
+    performanceLevel: performanceLevel,
+    description: description,
+  };
+
   return (
-    <UITeamCard
-      name={name}
-      description={description}
-      memberCount={memberCount}
-      isRecruiting={isRecruiting}
-      region={region}
-      onClick={onClick}
-      logo={
-        <TeamLogo src={logo} alt={name} size={64} />
-      }
-      badges={
-        <>
-          {performanceBadge}
-          {specializationContent}
-          {categoryBadge}
-          {languagesContent}
-        </>
-      }
+    <UiTeamCard
+      name={data.teamName}
+      leagueName={data.leagueName}
+      logo={data.logoUrl ? <Image src={data.logoUrl} alt={data.teamName} fullWidth fullHeight objectFit="cover" /> : undefined}
+      memberCount={data.memberCount}
+      rating={data.ratingLabel}
+      wins={data.winsLabel}
+      races={data.racesLabel}
+      region={data.region}
+      isRecruiting={data.isRecruiting}
+      performanceLevel={data.performanceLevel}
+      description={data.description}
+      onClick={() => onClick?.(data.teamId)}
     />
   );
 }