61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Button } from '@/ui/Button';
|
|
import { Link } from '@/ui/Link';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
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>
|
|
);
|
|
}
|