website refactor

apps/website/ui/LeaderboardRow.tsx

@@ -0,0 +1,76 @@
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
+import { Group } from './Group';
+
+export interface LeaderboardRowProps {
+  rank: ReactNode;
+  identity: ReactNode;
+  stats: ReactNode;
+  onClick?: () => void;
+}
+
+/**
+ * LeaderboardRow is a semantic UI component for displaying an entry in a leaderboard.
+ * It follows the "Modern Precision" theme with obsessive detail.
+ */
+export const LeaderboardRow = ({ 
+  rank, 
+  identity, 
+  stats, 
+  onClick 
+}: LeaderboardRowProps) => {
+  return (
+    <Surface
+      as={onClick ? 'button' : 'div'}
+      variant="precision"
+      onClick={onClick}
+      padding="none"
+      cursor={onClick ? 'pointer' : 'default'}
+      width="full"
+      textAlign="left"
+      transition="all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
+      hoverBg="rgba(25, 140, 255, 0.04)"
+      display="block"
+      style={{ 
+        border: 'none', 
+        borderBottom: '1px solid var(--ui-color-border-muted)',
+        background: 'transparent',
+        position: 'relative'
+      }}
+      className="group"
+    >
+      <Box 
+        display="flex" 
+        alignItems="center" 
+        gap={6} 
+        paddingX={6} 
+        paddingY={4}
+        className="transition-transform duration-200 group-hover:translate-x-1"
+      >
+        <Box width="10" display="flex" justifyContent="center" flexShrink={0}>
+          {rank}
+        </Box>
+        
+        <Box flexGrow={1} minWidth="0">
+          {identity}
+        </Box>
+        
+        <Group gap={8}>
+          {stats}
+        </Group>
+      </Box>
+      
+      {/* Hover indicator */}
+      <Box 
+        position="absolute" 
+        left={0} 
+        top={0} 
+        bottom={0} 
+        width={1} 
+        bg="var(--ui-color-intent-primary)" 
+        className="opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+      />
+    </Surface>
+  );
+};