website refactor

apps/website/components/profile/LeagueListItem.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Link } from '@/ui/Link';
+import { Button } from '@/ui/Button';
+import { Surface } from '@/ui/Surface';
+
+interface League {
+  leagueId: string;
+  name: string;
+  description: string;
+  membershipRole?: string;
+}
+
+interface LeagueListItemProps {
+  league: League;
+  isAdmin?: boolean;
+}
+
+export function LeagueListItem({ league, isAdmin }: LeagueListItemProps) {
+  return (
+    <Surface
+      variant="dark"
+      rounded="lg"
+      border
+      padding={4}
+      style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderColor: '#262626' }}
+    >
+      <Box 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}>
+            Your role:{' '}
+            <Text color="text-gray-400" style={{ textTransform: 'capitalize' }}>{league.membershipRole}</Text>
+          </Text>
+        )}
+      </Box>
+      <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>
+        </Link>
+        {isAdmin && (
+          <Link href={`/leagues/${league.leagueId}?tab=admin`} variant="ghost">
+            <Button variant="primary" size="sm">
+              Manage
+            </Button>
+          </Link>
+        )}
+      </Stack>
+    </Surface>
+  );
+}