website refactor

apps/website/templates/TeamsTemplate.tsx

@@ -12,6 +12,8 @@ import { EmptyState } from '@/ui/EmptyState';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Carousel } from '@/components/shared/Carousel';
 
 interface TeamsTemplateProps extends TemplateProps<TeamsViewData> {
   searchQuery: string;
@@ -34,7 +36,6 @@ export function TeamsTemplate({
   const filteredTeams = useMemo(() => {
     return teams.filter(team => 
       team.teamName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      (team.leagueName && team.leagueName.toLowerCase().includes(searchQuery.toLowerCase())) ||
       (team.region && team.region.toLowerCase().includes(searchQuery.toLowerCase()))
     );
   }, [teams, searchQuery]);
@@ -45,7 +46,7 @@ export function TeamsTemplate({
     }
 
     const topTeams = [...teams]
-      .sort((a, b) => parseFloat(b.ratingLabel) - parseFloat(a.ratingLabel))
+      .sort((a, b) => b.ratingValue - a.ratingValue)
       .slice(0, 3);
     
     const recruitingTeams = teams.filter(t => t.isRecruiting && !topTeams.find(top => top.teamId === t.teamId));
@@ -68,35 +69,29 @@ export function TeamsTemplate({
       <Container size="xl">
         <TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
         
-        <TeamSearchBar 
-          searchQuery={searchQuery} 
-          onSearchChange={onSearchChange} 
-        />
+        <Box marginBottom={12}>
+          <TeamSearchBar 
+            searchQuery={searchQuery} 
+            onSearchChange={onSearchChange} 
+          />
+        </Box>
 
         {clusters.length > 0 ? (
-          <div className="space-y-16">
+          <div className="space-y-20">
             {clusters.map((cluster) => (
-              <div key={cluster.title} className="space-y-8">
-                <div className="flex items-center gap-4">
-                  <Heading level={2} weight="bold" uppercase tracking-widest size="sm">
-                    {cluster.title}
-                  </Heading>
-                  <div className="flex-1 h-px bg-[var(--ui-color-border-muted)]" />
-                  <div className="px-3 py-1 border border-[var(--ui-color-border-muted)]">
-                    <Text size="xs" mono variant="low">{cluster.teams.length}</Text>
-                  </div>
-                </div>
-                
-                <TeamGrid>
-                  {cluster.teams.map((team) => (
-                    <TeamCard
-                      key={team.teamId}
-                      team={team}
-                      onClick={(id) => onTeamClick?.(id)}
-                    />
-                  ))}
-                </TeamGrid>
-              </div>
+              <Carousel 
+                key={cluster.title} 
+                title={cluster.title} 
+                count={cluster.teams.length}
+              >
+                {cluster.teams.map((team) => (
+                  <TeamCard
+                    key={team.teamId}
+                    team={team}
+                    onClick={(id) => onTeamClick?.(id)}
+                  />
+                ))}
+              </Carousel>
             ))}
           </div>
         ) : (