71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
|
|
|
|
import { Trophy } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Heading } from './Heading';
|
|
import { Icon } from './Icon';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
|
|
interface PodiumProps {
|
|
title: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function Podium({ title, children }: PodiumProps) {
|
|
return (
|
|
<Box bg="bg-iron-gray/50" rounded="2xl" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)' }} p={8} mb={10}>
|
|
<Box display="flex" justifyContent="center" mb={8}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Trophy} size={6} color="var(--warning-amber)" />
|
|
<Heading level={2}>{title}</Heading>
|
|
</Stack>
|
|
</Box>
|
|
|
|
<Stack direction="row" align="end" justify="center" gap={8}>
|
|
{children}
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
interface PodiumItemProps {
|
|
position: number;
|
|
height: string;
|
|
cardContent: ReactNode;
|
|
bgColor: string;
|
|
positionColor: string;
|
|
}
|
|
|
|
export function PodiumItem({
|
|
position,
|
|
height,
|
|
cardContent,
|
|
bgColor,
|
|
positionColor,
|
|
}: PodiumItemProps) {
|
|
return (
|
|
<Stack align="center">
|
|
{cardContent}
|
|
|
|
{/* Podium stand */}
|
|
<Box
|
|
bg={bgColor}
|
|
h={height}
|
|
border
|
|
style={{ borderColor: 'rgba(38, 38, 38, 0.8)', borderTopLeftRadius: '0.5rem', borderTopRightRadius: '0.5rem' }}
|
|
w="28"
|
|
display="flex"
|
|
p={3}
|
|
>
|
|
<Box display="flex" center fullWidth>
|
|
<Text size="3xl" weight="bold" color={positionColor}>
|
|
{position}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|