43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { Loader2, CheckCircle2 } from 'lucide-react';
|
|
|
|
interface ProgressBarProps {
|
|
/** Current task state */
|
|
state: 'PENDING' | 'PROCESSING' | 'SUCCESS' | 'FAILURE' | string;
|
|
/** Progress message */
|
|
message?: string;
|
|
}
|
|
|
|
export default function ProgressBar({ state, message }: ProgressBarProps) {
|
|
const { t } = useTranslation();
|
|
|
|
const isActive = state === 'PENDING' || state === 'PROCESSING';
|
|
const isComplete = state === 'SUCCESS';
|
|
|
|
return (
|
|
<div className="rounded-xl bg-slate-50 p-5 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
|
|
<div className="flex items-center gap-3">
|
|
{isActive && (
|
|
<Loader2 className="h-6 w-6 animate-spin text-primary-600 dark:text-primary-400" />
|
|
)}
|
|
{isComplete && (
|
|
<CheckCircle2 className="h-6 w-6 text-emerald-600" />
|
|
)}
|
|
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
{message || t('common.processing')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Animated progress bar for active states */}
|
|
{isActive && (
|
|
<div className="mt-3 h-1.5 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700">
|
|
<div className="progress-bar-animated h-full w-2/3 rounded-full bg-primary-500 transition-all" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|