extract components from website

apps/website/components/leagues/EmptyState.tsx

@@ -0,0 +1,53 @@
+import { Trophy, Sparkles, Search } from 'lucide-react';
+import Heading from '@/components/ui/Heading';
+import Button from '@/components/ui/Button';
+import Card from '@/components/ui/Card';
+
+interface EmptyStateProps {
+  title: string;
+  description: string;
+  icon?: React.ElementType;
+  actionIcon?: React.ElementType;
+  actionLabel?: string;
+  onAction?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function EmptyState({
+  title,
+  description,
+  icon: Icon = Trophy,
+  actionIcon: 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>
+  );
+}