website refactor

apps/website/ui/LeaderboardList.tsx

@@ -1,16 +1,31 @@
 import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
+import { Surface } from './primitives/Surface';
 
-interface LeaderboardListProps {
+export interface LeaderboardListProps {
   children: ReactNode;
 }
 
-export function LeaderboardList({ children }: LeaderboardListProps) {
+export const LeaderboardList = ({ children }: LeaderboardListProps) => {
   return (
-    <Box rounded="xl" bg="bg-iron-gray/30" border={true} borderColor="border-charcoal-outline" overflow="hidden">
-      <div className="divide-y divide-charcoal-outline/50">
+    <Surface variant="muted" rounded="xl" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
+      <Box display="flex" flexDirection="col">
         {children}
-      </div>
+      </Box>
+    </Surface>
+  );
+};
+
+export const LeaderboardListItem = ({ children, onClick }: { children: ReactNode, onClick?: () => void }) => {
+  return (
+    <Box 
+      padding={4} 
+      borderBottom 
+      onClick={onClick}
+      style={{ cursor: onClick ? 'pointer' : 'default' }}
+      className={onClick ? 'hover:bg-white/5 transition-colors' : ''}
+    >
+      {children}
     </Box>
   );
-}
+};