website refactor

apps/website/ui/LeaderboardPreviewShell.tsx

@@ -1,70 +1,58 @@
-import { Award, ChevronRight, LucideIcon } from 'lucide-react';
-import { ReactNode } from 'react';
+import React, { 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';
+import { Surface } from './primitives/Surface';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
 
-interface LeaderboardPreviewShellProps {
+export interface LeaderboardPreviewShellProps {
   title: string;
-  subtitle: string;
-  onViewFull: () => void;
+  subtitle?: string;
+  icon: LucideIcon;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
   children: ReactNode;
-  icon?: LucideIcon;
-  iconColor?: string;
-  iconBgGradient?: string;
-  viewFullLabel?: string;
+  footer?: ReactNode;
 }
 
-export function LeaderboardPreviewShell({
-  title,
-  subtitle,
-  onViewFull,
+export const LeaderboardPreviewShell = ({ 
+  title, 
+  subtitle, 
+  icon, 
+  intent = 'primary',
   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) {
+  footer 
+}: 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} />
+    <Surface variant="default" rounded="xl" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
+      <Box padding={6} borderBottom>
+        <Box display="flex" alignItems="center" justifyContent="between" marginBottom={4}>
+          <Box display="flex" alignItems="center" gap={4}>
+            <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
+              <Icon icon={icon} size={5} intent={intent} />
+            </Box>
+            <Box>
+              <Text size="lg" weight="bold" variant="high" block>
+                {title}
+              </Text>
+              {subtitle && (
+                <Text size="sm" variant="low">
+                  {subtitle}
+                </Text>
+              )}
+            </Box>
           </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>
-    </Box>
+      
+      <Box>
+        {children}
+      </Box>
+      
+      {footer && (
+        <Box padding={4} borderTop bg="rgba(255,255,255,0.02)">
+          {footer}
+        </Box>
+      )}
+    </Surface>
   );
-}
+};