website refactor

apps/website/components/leagues/EmptyState.tsx

@@ -1,11 +1,6 @@
 import { Trophy, Sparkles, LucideIcon } from 'lucide-react';
-import { Heading } from '@/ui/Heading';
-import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
+import { EmptyState as UiEmptyState } from '@/ui/EmptyState';
 
 interface EmptyStateProps {
   title: string;
@@ -15,7 +10,6 @@ interface EmptyStateProps {
   actionLabel?: string;
   onAction?: () => void;
   children?: React.ReactNode;
-  className?: string;
 }
 
 export function EmptyState({
@@ -26,38 +20,20 @@ export function EmptyState({
   actionLabel,
   onAction,
   children,
-  className,
 }: EmptyStateProps) {
   return (
-    <Card className={className}>
-      <Box textAlign="center" py={16}>
-        <Box maxWidth="md" mx="auto">
-          <Box height={16} width={16} mx="auto" display="flex" center rounded="2xl" backgroundColor="primary-blue" opacity={0.1} border borderColor="primary-blue" mb={6}>
-            <Icon icon={icon} size={8} color="text-primary-blue" />
-          </Box>
-          <Box mb={3}>
-            <Heading level={2}>
-              {title}
-            </Heading>
-          </Box>
-          <Box mb={8}>
-            <Text color="text-gray-400">
-              {description}
-            </Text>
-          </Box>
-          {children}
-          {actionLabel && onAction && (
-            <Button
-              variant="primary"
-              onClick={onAction}
-              icon={<Icon icon={actionIcon} size={4} />}
-              className="mx-auto"
-            >
-              {actionLabel}
-            </Button>
-          )}
-        </Box>
-      </Box>
+    <Card>
+      <UiEmptyState
+        title={title}
+        description={description}
+        icon={icon}
+        action={actionLabel && onAction ? {
+          label: actionLabel,
+          onClick: onAction,
+          icon: actionIcon,
+        } : undefined}
+      />
+      {children}
     </Card>
   );
 }