extract components from website

apps/website/components/leagues/NoResultsState.tsx

@@ -0,0 +1,45 @@
+import { Search } from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Card from '@/components/ui/Card';
+
+interface NoResultsStateProps {
+  icon?: React.ElementType;
+  message?: string;
+  searchQuery?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function NoResultsState({
+  icon: Icon = Search,
+  message,
+  searchQuery,
+  actionLabel = "Clear filters",
+  onAction,
+  children,
+  className
+}: NoResultsStateProps) {
+  const defaultMessage = message || `No leagues found${searchQuery ? ` matching "${searchQuery}"` : ' in this category'}`;
+
+  return (
+    <Card className={`text-center py-12 ${className || ''}`}>
+      <div className="flex flex-col items-center gap-4">
+        <Icon className="w-10 h-10 text-gray-600" />
+        <p className="text-gray-400">
+          {defaultMessage}
+        </p>
+        {children}
+        {actionLabel && onAction && (
+          <Button
+            variant="secondary"
+            onClick={onAction}
+          >
+            {actionLabel}
+          </Button>
+        )}
+      </div>
+    </Card>
+  );
+}