import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/primitives/Stack';
import { EmptyStateProps } from '@/ui/state-types';
import { Text } from '@/ui/Text';
import { Activity, Lock, Search } from 'lucide-react';
// Illustration components (simple SVG representations)
const Illustrations = {
racing: () => (
),
league: () => (
),
team: () => (
),
sponsor: () => (
),
driver: () => (
),
} as const;
/**
* EmptyState Component
*
* Provides consistent empty/placeholder states with 3 variants:
* - default: Standard empty state with icon, title, description, and action
* - minimal: Simple version without extra styling
* - full-page: Full page empty state with centered layout
*
* Supports both icons and illustrations for visual appeal.
*/
export function EmptyState({
icon: Icon,
title,
description,
action,
variant = 'default',
className = '',
illustration,
ariaLabel = 'Empty state',
}: EmptyStateProps) {
// Render illustration if provided
const IllustrationComponent = illustration ? Illustrations[illustration] : null;
// Common content
const Content = () => (
{/* Visual - Icon or Illustration */}
{IllustrationComponent ? (
) : Icon ? (
) : null}
{/* Title */}
{title}
{/* Description */}
{description && (
{description}
)}
{/* Action Button */}
{action && (
)}
);
// Render different variants
switch (variant) {
case 'default':
return (
);
case 'minimal':
return (
{/* Minimal icon */}
{Icon && (
)}
{title}
{description && (
{description}
)}
{action && (
}
>
{action.label}
)}
);
case 'full-page':
return (
{IllustrationComponent ? (
) : Icon ? (
) : null}
{title}
{description && (
{description}
)}
{action && (
)}
Need help? Contact us at{' '}
support@gridpilot.com
);
default:
return null;
}
}
/**
* Convenience component for default empty state
*/
export function DefaultEmptyState({ icon, title, description, action, className, illustration }: EmptyStateProps) {
return (
);
}
/**
* Convenience component for minimal empty state
*/
export function MinimalEmptyState({ icon, title, description, action, className }: Omit) {
return (
);
}
/**
* Convenience component for full-page empty state
*/
export function FullPageEmptyState({ icon, title, description, action, className, illustration }: EmptyStateProps) {
return (
);
}
/**
* Pre-configured empty states for common scenarios
*/
export function NoDataEmptyState({ onRetry }: { onRetry?: () => void }) {
return (
);
}
export function NoResultsEmptyState({ onRetry }: { onRetry?: () => void }) {
return (
);
}
export function NoAccessEmptyState({ onBack }: { onBack?: () => void }) {
return (
);
}