83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
import { ChevronRight } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Card } from './Card';
|
|
import { Icon } from './Icon';
|
|
import { Image } from './Image';
|
|
import { Text } from './Text';
|
|
|
|
export interface LeagueCardProps {
|
|
children: ReactNode;
|
|
onClick?: () => void;
|
|
coverUrl: string;
|
|
logo?: ReactNode;
|
|
badges?: ReactNode;
|
|
}
|
|
|
|
export const LeagueCard = ({ children, onClick, coverUrl, logo, badges }: LeagueCardProps) => {
|
|
return (
|
|
<Card
|
|
variant="dark"
|
|
onClick={onClick}
|
|
style={{ position: 'relative', cursor: onClick ? 'pointer' : 'default', overflow: 'hidden', height: '100%' }}
|
|
>
|
|
<Box height="8rem" position="relative" style={{ overflow: 'hidden' }}>
|
|
<Image src={coverUrl} alt="Cover" fullWidth fullHeight objectFit="cover" style={{ opacity: 0.6 }} />
|
|
<Box position="absolute" inset={0} style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }} />
|
|
<Box position="absolute" top={3} left={3} display="flex" gap={2}>
|
|
{badges}
|
|
</Box>
|
|
{logo && (
|
|
<Box position="absolute" left={4} bottom={-6} zIndex={10}>
|
|
{logo}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
<Box padding={4} paddingTop={8} display="flex" flexDirection="col" fullHeight>
|
|
{children}
|
|
</Box>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export interface LeagueCardStatsProps {
|
|
label: string;
|
|
value: string;
|
|
percentage: number;
|
|
intent?: 'primary' | 'success' | 'warning';
|
|
}
|
|
|
|
export const LeagueCardStats = ({ label, value, percentage, intent = 'primary' }: LeagueCardStatsProps) => {
|
|
const intentColors = {
|
|
primary: 'var(--ui-color-intent-primary)',
|
|
success: 'var(--ui-color-intent-success)',
|
|
warning: 'var(--ui-color-intent-warning)',
|
|
};
|
|
|
|
return (
|
|
<Box marginBottom={4}>
|
|
<Box display="flex" alignItems="center" justifyContent="between" marginBottom={1.5}>
|
|
<Text size="xs" variant="low" weight="bold" uppercase>{label}</Text>
|
|
<Text size="xs" variant="med" font="mono">{value}</Text>
|
|
</Box>
|
|
<Box height="4px" bg="var(--ui-color-bg-surface-muted)" rounded="full" style={{ overflow: 'hidden' }}>
|
|
<Box height="100%" bg={intentColors[intent]} style={{ width: `${Math.min(percentage, 100)}%` }} />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export interface LeagueCardFooterProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const LeagueCardFooter = ({ children }: LeagueCardFooterProps) => (
|
|
<Box marginTop="auto" paddingTop={3} style={{ borderTop: '1px solid var(--ui-color-border-muted)', opacity: 0.5 }} display="flex" alignItems="center" justifyContent="between">
|
|
{children}
|
|
<Box display="flex" alignItems="center" gap={1}>
|
|
<Text size="xs" variant="low" weight="bold" uppercase>VIEW</Text>
|
|
<Icon icon={ChevronRight} size={3} intent="low" />
|
|
</Box>
|
|
</Box>
|
|
);
|