54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { Link } from '@/ui/Link';
|
|
import { Text } from '@/ui/Text';
|
|
import { ListItem, ListItemInfo, ListItemActions } from '@/ui/ListItem';
|
|
import React from 'react';
|
|
|
|
interface League {
|
|
leagueId: string;
|
|
name: string;
|
|
description: string;
|
|
membershipRole?: string;
|
|
}
|
|
|
|
interface LeagueListItemProps {
|
|
league: League;
|
|
isAdmin?: boolean;
|
|
}
|
|
|
|
export function LeagueListItem({ league, isAdmin }: LeagueListItemProps) {
|
|
return (
|
|
<ListItem>
|
|
<ListItemInfo
|
|
title={league.name}
|
|
description={league.description}
|
|
meta={
|
|
league.membershipRole && (
|
|
<Text size="xs" variant="low">
|
|
Your role:{' '}
|
|
<Text as="span" variant="med" style={{ textTransform: 'capitalize' }}>{league.membershipRole}</Text>
|
|
</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>
|
|
)}
|
|
</ListItemActions>
|
|
</ListItem>
|
|
);
|
|
}
|