website refactor

apps/website/ui/LeaderboardPreviewShell.tsx

@@ -0,0 +1,70 @@
+import { Award, ChevronRight, LucideIcon } 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 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>
+  );
+}