website refactor

apps/website/ui/LeaderboardPreviewShell.tsx

@@ -1,6 +1,7 @@
 import { LucideIcon } from 'lucide-react';
 import { ReactNode } from 'react';
 import { Box } from './Box';
+import { Button } from './Button';
 import { Icon } from './Icon';
 import { Surface } from './Surface';
 import { Text } from './Text';
@@ -12,6 +13,10 @@ export interface LeaderboardPreviewShellProps {
   intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
   children: ReactNode;
   footer?: ReactNode;
+  onViewFull?: () => void;
+  iconColor?: string;
+  iconBgGradient?: string;
+  viewFullLabel?: string;
 }
 
 export const LeaderboardPreviewShell = ({ 
@@ -20,15 +25,19 @@ export const LeaderboardPreviewShell = ({
   icon, 
   intent = 'primary',
   children,
-  footer 
+  footer,
+  onViewFull,
+  iconColor,
+  iconBgGradient,
+  viewFullLabel
 }: LeaderboardPreviewShellProps) => {
   return (
     <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 padding={2} rounded="lg" bg={iconBgGradient || "var(--ui-color-bg-surface-muted)"} style={iconColor ? { color: iconColor } : undefined}>
+              <Icon icon={icon} size={5} intent={iconColor ? undefined : intent} />
             </Box>
             <Box>
               <Text size="lg" weight="bold" variant="high" block>
@@ -41,6 +50,11 @@ export const LeaderboardPreviewShell = ({
               )}
             </Box>
           </Box>
+          {onViewFull && (
+            <Button variant="ghost" size="sm" onClick={onViewFull}>
+              {viewFullLabel || 'View Full'}
+            </Button>
+          )}
         </Box>
       </Box>