65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
|
|
|
|
import { Award, ChevronRight } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Button } from './Button';
|
|
import { Heading } from './Heading';
|
|
import { Icon } from './Icon';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
|
|
interface TeamLeaderboardPreviewProps {
|
|
title: string;
|
|
subtitle: string;
|
|
onViewFull: () => void;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function TeamLeaderboardPreview({
|
|
title,
|
|
subtitle,
|
|
onViewFull,
|
|
children,
|
|
}: TeamLeaderboardPreviewProps) {
|
|
return (
|
|
<Box mb={12}>
|
|
{/* Header */}
|
|
<Stack direction="row" align="center" justify="between" mb={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box
|
|
display="flex"
|
|
h="11"
|
|
w="11"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
rounded="xl"
|
|
style={{ background: 'linear-gradient(to bottom right, rgba(250, 204, 21, 0.2), rgba(217, 119, 6, 0.1))', border: '1px solid rgba(250, 204, 21, 0.3)' }}
|
|
>
|
|
<Icon icon={Award} size={5} color="#facc15" />
|
|
</Box>
|
|
<Box>
|
|
<Heading level={2}>{title}</Heading>
|
|
<Text size="sm" color="text-gray-500">{subtitle}</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onViewFull}
|
|
icon={<Icon icon={ChevronRight} size={4} />}
|
|
>
|
|
View Full Leaderboard
|
|
</Button>
|
|
</Stack>
|
|
|
|
{/* Compact Leaderboard */}
|
|
<Box rounded="xl" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline/80" overflow="hidden">
|
|
<Stack gap={0}>
|
|
{children}
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|