54 lines
2.5 KiB
TypeScript
54 lines
2.5 KiB
TypeScript
/**
|
|
* @license
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { Loader2, AlertCircle, Inbox } from 'lucide-react';
|
|
import { cn } from '../../lib/utils';
|
|
|
|
export const LoadingState: React.FC<{ message?: string; className?: string }> = ({ message = 'Syncing data...', className }) => (
|
|
<div className={cn("flex flex-col items-center justify-center p-12 text-center", className)}>
|
|
<div className="w-16 h-16 bg-slate-50 rounded-3xl flex items-center justify-center mb-4 border border-slate-100 shadow-sm">
|
|
<Loader2 className="w-8 h-8 text-indigo-600 animate-spin" />
|
|
</div>
|
|
<h3 className="text-base font-bold text-slate-900 italic tracking-tight">{message}</h3>
|
|
<p className="text-xs text-slate-500 mt-1">Please wait while the quantum cores stabilize.</p>
|
|
</div>
|
|
);
|
|
|
|
export const EmptyState: React.FC<{ title: string; description: string; icon?: any; action?: React.ReactNode; className?: string }> = ({
|
|
title,
|
|
description,
|
|
icon: Icon = Inbox,
|
|
action,
|
|
className
|
|
}) => (
|
|
<div className={cn("flex flex-col items-center justify-center p-12 text-center", className)}>
|
|
<div className="w-20 h-20 bg-slate-50 rounded-[2rem] flex items-center justify-center mb-6 border border-slate-100/50 shadow-sm group">
|
|
<Icon className="w-10 h-10 text-slate-300 group-hover:text-indigo-400 transition-colors duration-500" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-slate-900 italic tracking-tight mb-2">{title}</h3>
|
|
<p className="text-sm text-slate-500 max-w-xs mx-auto italic mb-8">{description}</p>
|
|
{action}
|
|
</div>
|
|
);
|
|
|
|
export const ErrorState: React.FC<{ message: string; onRetry?: () => void; className?: string }> = ({ message, onRetry, className }) => (
|
|
<div className={cn("flex flex-col items-center justify-center p-12 text-center bg-rose-50/30 rounded-3xl border border-rose-100", className)}>
|
|
<div className="w-16 h-16 bg-rose-100 rounded-3xl flex items-center justify-center mb-4 border border-rose-200 shadow-sm">
|
|
<AlertCircle className="w-8 h-8 text-rose-600" />
|
|
</div>
|
|
<h3 className="text-base font-bold text-rose-900 italic tracking-tight">System Fault Detected</h3>
|
|
<p className="text-xs text-rose-600/70 mt-1 mb-6 max-w-xs">{message}</p>
|
|
{onRetry && (
|
|
<button
|
|
onClick={onRetry}
|
|
className="px-6 py-2 bg-rose-600 text-white rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-rose-700 transition-all shadow-md active:scale-95"
|
|
>
|
|
Re-sync Module
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|