71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import { Award, ChevronRight, LucideIcon } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Button } from './Button';
|
|
import { Heading } from './Heading';
|
|
import { Icon } from './Icon';
|
|
import { Stack } from './primitives/Stack';
|
|
import { Text } from './Text';
|
|
|
|
interface LeaderboardPreviewShellProps {
|
|
title: string;
|
|
subtitle: string;
|
|
onViewFull: () => void;
|
|
children: ReactNode;
|
|
icon?: LucideIcon;
|
|
iconColor?: string;
|
|
iconBgGradient?: string;
|
|
viewFullLabel?: string;
|
|
}
|
|
|
|
export function LeaderboardPreviewShell({
|
|
title,
|
|
subtitle,
|
|
onViewFull,
|
|
children,
|
|
icon = Award,
|
|
iconColor = "#facc15",
|
|
iconBgGradient = 'linear-gradient(to bottom right, rgba(250, 204, 21, 0.2), rgba(217, 119, 6, 0.1))',
|
|
viewFullLabel = "View Full Leaderboard",
|
|
}: LeaderboardPreviewShellProps) {
|
|
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: iconBgGradient, border: `1px solid ${iconColor}4D` }}
|
|
>
|
|
<Icon icon={icon} size={5} color={iconColor} />
|
|
</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} />}
|
|
>
|
|
{viewFullLabel}
|
|
</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>
|
|
);
|
|
}
|