Spaces:
Running
Running
File size: 4,043 Bytes
ee0b401 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
import React from "react";
import { motion } from "framer-motion";
import {
FileSearch,
Cpu,
TableProperties,
CheckCircle2,
Loader2,
} from "lucide-react";
import { cn } from "@/lib/utils";
const steps = [
{ id: "upload", label: "Document Received", icon: FileSearch },
{ id: "analyze", label: "AI Analysis", icon: Cpu },
{ id: "extract", label: "Data Extraction", icon: TableProperties },
{ id: "complete", label: "Complete", icon: CheckCircle2 },
];
export default function ProcessingStatus({ isProcessing, isComplete }) {
const getCurrentStep = () => {
if (isComplete) return 4;
if (isProcessing) return 2;
return 0;
};
const currentStep = getCurrentStep();
if (!isProcessing && !isComplete) return null;
return (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
className="bg-white rounded-2xl border border-slate-200 p-6"
>
<div className="flex items-center justify-between">
{steps.map((step, index) => {
const isActive = index + 1 === currentStep;
const isCompleted = index + 1 < currentStep;
const Icon = step.icon;
return (
<React.Fragment key={step.id}>
<div className="flex flex-col items-center">
<motion.div
initial={false}
animate={{
scale: isActive ? 1.1 : 1,
backgroundColor: isCompleted
? "rgb(16 185 129)"
: isActive
? "rgb(99 102 241)"
: "rgb(241 245 249)",
}}
className={cn(
"h-12 w-12 rounded-xl flex items-center justify-center mb-2 transition-colors",
(isCompleted || isActive) && "shadow-lg"
)}
style={{
boxShadow: isActive
? "0 8px 16px -4px rgba(99, 102, 241, 0.3)"
: isCompleted
? "0 8px 16px -4px rgba(16, 185, 129, 0.3)"
: "none",
}}
>
{isActive ? (
<motion.div
animate={{ rotate: 360 }}
transition={{
duration: 1.5,
repeat: Infinity,
ease: "linear",
}}
>
<Loader2 className="h-5 w-5 text-white" />
</motion.div>
) : (
<Icon
className={cn(
"h-5 w-5",
isCompleted ? "text-white" : "text-slate-400"
)}
/>
)}
</motion.div>
<span
className={cn(
"text-xs font-medium text-center",
isActive
? "text-indigo-600"
: isCompleted
? "text-emerald-600"
: "text-slate-400"
)}
>
{step.label}
</span>
</div>
{index < steps.length - 1 && (
<div className="flex-1 h-0.5 mx-4 mb-6 relative overflow-hidden rounded-full bg-slate-100">
<motion.div
initial={{ width: 0 }}
animate={{
width: isCompleted ? "100%" : isActive ? "50%" : "0%",
}}
transition={{ duration: 0.5 }}
className={cn(
"absolute inset-y-0 left-0",
isCompleted ? "bg-emerald-500" : "bg-indigo-500"
)}
/>
</div>
)}
</React.Fragment>
);
})}
</div>
</motion.div>
);
}
|