45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
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>
|
|
);
|
|
} |