117 lines
3.3 KiB
TypeScript
117 lines
3.3 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';
|
|
import { Stack } from './Stack';
|
|
import { Group } from './Group';
|
|
|
|
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="precision"
|
|
onClick={onClick}
|
|
style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
|
|
padding="none"
|
|
>
|
|
<Box height="10rem" position="relative" overflow="hidden">
|
|
<Image
|
|
src={coverUrl}
|
|
alt="Cover"
|
|
fullWidth
|
|
fullHeight
|
|
objectFit="cover"
|
|
style={{ opacity: 0.4, filter: 'grayscale(0.2)' }}
|
|
/>
|
|
<Box
|
|
position="absolute"
|
|
inset={0}
|
|
style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }}
|
|
/>
|
|
<Box position="absolute" top={4} left={4}>
|
|
<Group gap={2}>
|
|
{badges}
|
|
</Group>
|
|
</Box>
|
|
{logo && (
|
|
<Box position="absolute" left={6} bottom={-4} zIndex={10}>
|
|
{logo}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
<Box padding={6} paddingTop={10} display="flex" flexDirection="col" flex={1}>
|
|
{children}
|
|
</Box>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export interface LeagueCardStatsProps {
|
|
label: string;
|
|
value: string;
|
|
percentage: number;
|
|
intent?: 'primary' | 'success' | 'warning' | 'telemetry';
|
|
}
|
|
|
|
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)',
|
|
telemetry: 'var(--ui-color-intent-telemetry)',
|
|
};
|
|
|
|
return (
|
|
<Box marginBottom={6}>
|
|
<Stack gap={2}>
|
|
<Group justify="between" align="end">
|
|
<Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">{label}</Text>
|
|
<Text size="sm" variant="high" font="mono" weight="bold">{value}</Text>
|
|
</Group>
|
|
<Box height="2px" bg="var(--ui-color-bg-surface-muted)" rounded="full" overflow="hidden">
|
|
<Box
|
|
height="100%"
|
|
bg={intentColors[intent]}
|
|
style={{
|
|
width: `${Math.min(percentage, 100)}%`,
|
|
boxShadow: `0 0 8px ${intentColors[intent]}44`
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export interface LeagueCardFooterProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const LeagueCardFooter = ({ children }: LeagueCardFooterProps) => (
|
|
<Box
|
|
marginTop="auto"
|
|
paddingTop={4}
|
|
style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}
|
|
>
|
|
<Group justify="between" align="center">
|
|
<Box flex={1}>
|
|
{children}
|
|
</Box>
|
|
<Group gap={1} align="center">
|
|
<Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">ACCESS</Text>
|
|
<Icon icon={ChevronRight} size={3} intent="low" />
|
|
</Group>
|
|
</Group>
|
|
</Box>
|
|
);
|