website refactor

apps/website/ui/LeaderboardTableShell.tsx

@@ -1,49 +1,17 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
+import { Surface } from './primitives/Surface';
 
-interface LeaderboardTableShellProps {
-  columns: {
-    key: string;
-    label: string;
-    align?: 'left' | 'center' | 'right';
-    width?: string;
-  }[];
-  children: React.ReactNode;
-  className?: string;
+export interface LeaderboardTableShellProps {
+  children: ReactNode;
 }
 
-export function LeaderboardTableShell({ columns, children, className = '' }: LeaderboardTableShellProps) {
+export const LeaderboardTableShell = ({ children }: LeaderboardTableShellProps) => {
   return (
-    <Box 
-      rounded="xl" 
-      bg="bg-iron-gray/30" 
-      border 
-      borderColor="border-charcoal-outline" 
-      overflow="hidden"
-      className={className}
-    >
-      <div className="overflow-x-auto">
-        <table className="w-full text-left border-collapse">
-          <thead>
-            <tr className="border-b border-charcoal-outline/50 bg-graphite-black/50">
-              {columns.map((col) => (
-                <th 
-                  key={col.key}
-                  className={`px-4 py-3 text-[10px] uppercase tracking-widest font-bold text-gray-500 ${
-                    col.align === 'center' ? 'text-center' : col.align === 'right' ? 'text-right' : 'text-left'
-                  }`}
-                  style={col.width ? { width: col.width } : {}}
-                >
-                  {col.label}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-charcoal-outline/30">
-            {children}
-          </tbody>
-        </table>
-      </div>
-    </Box>
+    <Surface variant="default" rounded="xl" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
+      <Box>
+        {children}
+      </Box>
+    </Surface>
   );
-}
+};