66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import { CheckCircle2, Clock3, LoaderCircle, XCircle } from 'lucide-react';
|
|
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import type { UploadStatus } from '@/types';
|
|
|
|
interface UploadStatusBadgeProps {
|
|
status: UploadStatus;
|
|
progress: number;
|
|
}
|
|
|
|
const statusConfig = {
|
|
queued: {
|
|
label: 'Queued',
|
|
icon: Clock3,
|
|
className: 'bg-zinc-500/15 text-zinc-500 dark:text-zinc-300',
|
|
},
|
|
processing: {
|
|
label: 'Processing',
|
|
icon: LoaderCircle,
|
|
className: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
|
|
},
|
|
completed: {
|
|
label: 'Completed',
|
|
icon: CheckCircle2,
|
|
className: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
|
|
},
|
|
failed: {
|
|
label: 'Failed',
|
|
icon: XCircle,
|
|
className: 'bg-red-500/15 text-red-600 dark:text-red-400',
|
|
},
|
|
} satisfies Record<
|
|
UploadStatus,
|
|
{ label: string; icon: typeof Clock3; className: string }
|
|
>;
|
|
|
|
export function UploadStatusBadge({
|
|
status,
|
|
progress,
|
|
}: UploadStatusBadgeProps) {
|
|
const config = statusConfig[status];
|
|
const Icon = config.icon;
|
|
|
|
return (
|
|
<div className="space-y-1.5">
|
|
<Badge variant="secondary" className={config.className}>
|
|
<Icon
|
|
className={status === 'processing' ? 'animate-spin' : undefined}
|
|
/>
|
|
{config.label}
|
|
</Badge>
|
|
{status === 'processing' ? (
|
|
<div className="w-24 space-y-1">
|
|
<span className="text-xs text-muted-foreground">
|
|
{progress}% complete
|
|
</span>
|
|
<Progress value={progress} className="h-1.5" />
|
|
</div>
|
|
) : status === 'completed' ? (
|
|
<p className="text-xs text-muted-foreground">100%</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|