website refactor

apps/website/components/leagues/LeagueListItem.tsx

@@ -1,8 +1,10 @@
+'use client';
+
 import { Button } from '@/ui/Button';
-import { Card } from '@/ui/Card';
 import { Link } from '@/ui/Link';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { ListItem, ListItemInfo, ListItemActions } from '@/ui/ListItem';
+import React from 'react';
 
 interface League {
   leagueId: string;
@@ -18,40 +20,34 @@ interface LeagueListItemProps {
 
 export function LeagueListItem({ league, isAdmin }: LeagueListItemProps) {
   return (
-    <Card
-      variant="outline"
-      p={4}
-      className="bg-graphite-black border-[#262626]"
-    >
-      <Stack direction="row" align="center" justify="between" fullWidth>
-        <Stack style={{ flex: 1, minWidth: 0 }}>
-          <Text weight="medium" color="text-white" block>{league.name}</Text>
-          <Text size="xs" color="text-gray-400" block mt={1} style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
-            {league.description}
-          </Text>
-          {league.membershipRole && (
-            <Text size="xs" color="text-gray-500" block mt={1}>
+    <ListItem>
+      <ListItemInfo
+        title={league.name}
+        description={league.description}
+        meta={
+          league.membershipRole && (
+            <Text size="xs" variant="low">
               Your role:{' '}
-              <Text color="text-gray-400" style={{ textTransform: 'capitalize' }}>{league.membershipRole}</Text>
+              <Text as="span" variant="med" style={{ textTransform: 'capitalize' }}>{league.membershipRole}</Text>
             </Text>
-          )}
-        </Stack>
-        <Stack direction="row" align="center" gap={2} style={{ marginLeft: '1rem' }}>
-          <Link
-            href={`/leagues/${league.leagueId}`}
-            variant="ghost"
-          >
-            <Text size="sm" color="text-gray-300">View</Text>
+          )
+        }
+      />
+      <ListItemActions>
+        <Link
+          href={`/leagues/${league.leagueId}`}
+          variant="ghost"
+        >
+          <Text size="sm" variant="med">View</Text>
+        </Link>
+        {isAdmin && (
+          <Link href={`/leagues/${league.leagueId}?tab=admin`} variant="ghost">
+            <Button variant="primary" size="sm">
+              Manage
+            </Button>
           </Link>
-          {isAdmin && (
-            <Link href={`/leagues/${league.leagueId}?tab=admin`} variant="ghost">
-              <Button variant="primary" size="sm">
-                Manage
-              </Button>
-            </Link>
-          )}
-        </Stack>
-      </Stack>
-    </Card>
+        )}
+      </ListItemActions>
+    </ListItem>
   );
 }