website refactor

apps/website/components/leaderboards/LeaderboardTableShell.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface LeaderboardTableShellProps {
+  children: React.ReactNode;
+  isEmpty?: boolean;
+  emptyMessage?: string;
+  emptyDescription?: string;
+}
+
+export function LeaderboardTableShell({
+  children,
+  isEmpty,
+  emptyMessage = 'No data found',
+  emptyDescription = 'Try adjusting your filters or search query',
+}: LeaderboardTableShellProps) {
+  if (isEmpty) {
+    return (
+      <Box 
+        py={16} 
+        textAlign="center" 
+        bg="bg-iron-gray/20" 
+        border 
+        borderColor="border-charcoal-outline" 
+        rounded="xl"
+      >
+        <Text size="4xl" block mb={4}>🔍</Text>
+        <Text color="text-gray-400" block mb={2} weight="semibold">{emptyMessage}</Text>
+        <Text size="sm" color="text-gray-500">{emptyDescription}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box 
+      rounded="xl" 
+      bg="bg-iron-gray/20" 
+      border 
+      borderColor="border-charcoal-outline" 
+      overflow="hidden"
+    >
+      {children}
+    </Box>
+  );
+}