wip

apps/website/components/leagues/EmptyState.tsx

@@ -1,13 +1,17 @@
-import { Trophy, Sparkles, Search } from 'lucide-react';
-import Heading from '@/ui/Heading';
-import Button from '@/ui/Button';
-import Card from '@/ui/Card';
+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';
 
 interface EmptyStateProps {
   title: string;
   description: string;
-  icon?: React.ElementType;
-  actionIcon?: React.ElementType;
+  icon?: LucideIcon;
+  actionIcon?: LucideIcon;
   actionLabel?: string;
   onAction?: () => void;
   children?: React.ReactNode;
@@ -17,37 +21,43 @@ interface EmptyStateProps {
 export function EmptyState({
   title,
   description,
-  icon: Icon = Trophy,
-  actionIcon: ActionIcon = Sparkles,
+  icon = Trophy,
+  actionIcon = Sparkles,
   actionLabel,
   onAction,
   children,
   className,
 }: EmptyStateProps) {
   return (
-    <Card className={`text-center py-16 ${className || ''}`}>
-      <div className="max-w-md mx-auto">
-        <div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-primary-blue/10 border border-primary-blue/20 mb-6">
-          <Icon className="w-8 h-8 text-primary-blue" />
-        </div>
-        <Heading level={2} className="text-2xl mb-3">
-          {title}
-        </Heading>
-        <p className="text-gray-400 mb-8">
-          {description}
-        </p>
-        {children}
-        {actionLabel && onAction && (
-          <Button
-            variant="primary"
-            onClick={onAction}
-            className="flex items-center gap-2 mx-auto"
-          >
-            <ActionIcon className="w-4 h-4" />
-            {actionLabel}
-          </Button>
-        )}
-      </div>
+    <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>
   );
-}
+}