330 lines
10 KiB
TypeScript
330 lines
10 KiB
TypeScript
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { EmptyStateProps } from '@/ui/state-types';
|
|
|
|
// Illustration components (simple SVG representations)
|
|
const Illustrations = {
|
|
racing: () => (
|
|
<svg className="w-20 h-20" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 70 L80 70 L85 50 L80 30 L20 30 L15 50 Z" fill="currentColor" opacity="0.2"/>
|
|
<path d="M30 60 L70 60 L75 50 L70 40 L30 40 L25 50 Z" fill="currentColor" opacity="0.4"/>
|
|
<circle cx="35" cy="65" r="3" fill="currentColor"/>
|
|
<circle cx="65" cy="65" r="3" fill="currentColor"/>
|
|
<path d="M50 30 L50 20 M45 25 L50 20 L55 25" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
|
|
</svg>
|
|
),
|
|
league: () => (
|
|
<svg className="w-20 h-20" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="50" cy="35" r="15" fill="currentColor" opacity="0.3"/>
|
|
<path d="M35 50 L50 45 L65 50 L65 70 L35 70 Z" fill="currentColor" opacity="0.2"/>
|
|
<path d="M40 55 L50 52 L60 55" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
|
|
<path d="M40 62 L50 59 L60 62" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
|
|
</svg>
|
|
),
|
|
team: () => (
|
|
<svg className="w-20 h-20" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="35" cy="35" r="8" fill="currentColor" opacity="0.3"/>
|
|
<circle cx="65" cy="35" r="8" fill="currentColor" opacity="0.3"/>
|
|
<circle cx="50" cy="55" r="10" fill="currentColor" opacity="0.2"/>
|
|
<path d="M35 45 L35 60 M65 45 L65 60 M50 65 L50 80" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/>
|
|
</svg>
|
|
),
|
|
sponsor: () => (
|
|
<svg className="w-20 h-20" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="25" y="25" width="50" height="50" rx="8" fill="currentColor" opacity="0.2"/>
|
|
<path d="M35 50 L45 60 L65 40" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
|
|
<path d="M50 35 L50 65 M40 50 L60 50" stroke="currentColor" strokeWidth="2" opacity="0.5"/>
|
|
</svg>
|
|
),
|
|
driver: () => (
|
|
<svg className="w-20 h-20" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="50" cy="30" r="8" fill="currentColor" opacity="0.3"/>
|
|
<path d="M42 38 L58 38 L55 55 L45 55 Z" fill="currentColor" opacity="0.2"/>
|
|
<path d="M45 55 L40 70 M55 55 L60 70" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/>
|
|
<circle cx="40" cy="72" r="3" fill="currentColor"/>
|
|
<circle cx="60" cy="72" r="3" fill="currentColor"/>
|
|
</svg>
|
|
),
|
|
} 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 */}
|
|
<div className="flex justify-center mb-4">
|
|
{IllustrationComponent ? (
|
|
<div className="text-gray-500">
|
|
<IllustrationComponent />
|
|
</div>
|
|
) : Icon ? (
|
|
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-iron-gray/60 border border-charcoal-outline/50">
|
|
<Icon className="w-8 h-8 text-gray-500" />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="text-xl font-semibold text-white mb-2 text-center">
|
|
{title}
|
|
</h3>
|
|
|
|
{/* Description */}
|
|
{description && (
|
|
<p className="text-gray-400 mb-6 text-center leading-relaxed">
|
|
{description}
|
|
</p>
|
|
)}
|
|
|
|
{/* Action Button */}
|
|
{action && (
|
|
<div className="flex justify-center">
|
|
<Button
|
|
variant={action.variant || 'primary'}
|
|
onClick={action.onClick}
|
|
className="min-w-[140px]"
|
|
>
|
|
{action.icon && (
|
|
<action.icon className="w-4 h-4 mr-2" />
|
|
)}
|
|
{action.label}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
// Render different variants
|
|
switch (variant) {
|
|
case 'default':
|
|
return (
|
|
<div
|
|
className={`text-center py-12 ${className}`}
|
|
role="status"
|
|
aria-label={ariaLabel}
|
|
aria-live="polite"
|
|
>
|
|
<div className="max-w-md mx-auto">
|
|
<Content />
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case 'minimal':
|
|
return (
|
|
<div
|
|
className={`text-center py-8 ${className}`}
|
|
role="status"
|
|
aria-label={ariaLabel}
|
|
aria-live="polite"
|
|
>
|
|
<div className="max-w-sm mx-auto space-y-3">
|
|
{/* Minimal icon */}
|
|
{Icon && (
|
|
<div className="flex justify-center">
|
|
<Icon className="w-10 h-10 text-gray-600" />
|
|
</div>
|
|
)}
|
|
<h3 className="text-lg font-medium text-gray-300">
|
|
{title}
|
|
</h3>
|
|
{description && (
|
|
<p className="text-sm text-gray-500">
|
|
{description}
|
|
</p>
|
|
)}
|
|
{action && (
|
|
<button
|
|
onClick={action.onClick}
|
|
className="text-sm text-primary-blue hover:text-blue-400 font-medium mt-2 inline-flex items-center gap-1"
|
|
>
|
|
{action.label}
|
|
{action.icon && <action.icon className="w-3 h-3" />}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case 'full-page':
|
|
return (
|
|
<div
|
|
className={`fixed inset-0 bg-deep-graphite flex items-center justify-center p-6 ${className}`}
|
|
role="status"
|
|
aria-label={ariaLabel}
|
|
aria-live="polite"
|
|
>
|
|
<div className="max-w-lg w-full text-center">
|
|
<div className="mb-6">
|
|
{IllustrationComponent ? (
|
|
<div className="text-gray-500 flex justify-center">
|
|
<IllustrationComponent />
|
|
</div>
|
|
) : Icon ? (
|
|
<div className="flex justify-center">
|
|
<div className="flex h-20 w-20 items-center justify-center rounded-3xl bg-iron-gray/60 border border-charcoal-outline/50">
|
|
<Icon className="w-10 h-10 text-gray-500" />
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<h2 className="text-3xl font-bold text-white mb-4">
|
|
{title}
|
|
</h2>
|
|
|
|
{description && (
|
|
<p className="text-gray-400 text-lg mb-8 leading-relaxed">
|
|
{description}
|
|
</p>
|
|
)}
|
|
|
|
{action && (
|
|
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
|
<Button
|
|
variant={action.variant || 'primary'}
|
|
onClick={action.onClick}
|
|
className="min-w-[160px]"
|
|
>
|
|
{action.icon && (
|
|
<action.icon className="w-4 h-4 mr-2" />
|
|
)}
|
|
{action.label}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Additional helper text for full-page variant */}
|
|
<div className="mt-8 text-sm text-gray-500">
|
|
Need help? Contact us at{' '}
|
|
<a
|
|
href="mailto:support@gridpilot.com"
|
|
className="text-primary-blue hover:underline"
|
|
>
|
|
support@gridpilot.com
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Convenience component for default empty state
|
|
*/
|
|
export function DefaultEmptyState({ icon, title, description, action, className, illustration }: EmptyStateProps) {
|
|
return (
|
|
<EmptyState
|
|
icon={icon}
|
|
title={title}
|
|
description={description}
|
|
action={action}
|
|
variant="default"
|
|
className={className}
|
|
illustration={illustration}
|
|
/>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Convenience component for minimal empty state
|
|
*/
|
|
export function MinimalEmptyState({ icon, title, description, action, className }: Omit<EmptyStateProps, 'variant'>) {
|
|
return (
|
|
<EmptyState
|
|
icon={icon}
|
|
title={title}
|
|
description={description}
|
|
action={action}
|
|
variant="minimal"
|
|
className={className}
|
|
/>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Convenience component for full-page empty state
|
|
*/
|
|
export function FullPageEmptyState({ icon, title, description, action, className, illustration }: EmptyStateProps) {
|
|
return (
|
|
<EmptyState
|
|
icon={icon}
|
|
title={title}
|
|
description={description}
|
|
action={action}
|
|
variant="full-page"
|
|
className={className}
|
|
illustration={illustration}
|
|
/>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Pre-configured empty states for common scenarios
|
|
*/
|
|
|
|
import { Activity, Lock, Search } from 'lucide-react';
|
|
|
|
export function NoDataEmptyState({ onRetry }: { onRetry?: () => void }) {
|
|
return (
|
|
<EmptyState
|
|
icon={Activity}
|
|
title="No data available"
|
|
description="There is nothing to display here at the moment"
|
|
action={onRetry ? { label: 'Refresh', onClick: onRetry } : undefined}
|
|
variant="default"
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function NoResultsEmptyState({ onRetry }: { onRetry?: () => void }) {
|
|
return (
|
|
<EmptyState
|
|
icon={Search}
|
|
title="No results found"
|
|
description="Try adjusting your search or filters"
|
|
action={onRetry ? { label: 'Clear Filters', onClick: onRetry } : undefined}
|
|
variant="default"
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function NoAccessEmptyState({ onBack }: { onBack?: () => void }) {
|
|
return (
|
|
<EmptyState
|
|
icon={Lock}
|
|
title="Access denied"
|
|
description="You don't have permission to view this content"
|
|
action={onBack ? { label: 'Go Back', onClick: onBack } : undefined}
|
|
variant="full-page"
|
|
/>
|
|
);
|
|
}
|