1

prisma/ProcessNode.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Loader2, CheckCircle2, ChevronUp, ChevronDown } from 'lucide-react';
+
+interface ProcessNodeProps {
+  icon: React.ElementType;
+  title: string;
+  status: 'idle' | 'active' | 'completed';
+  children?: React.ReactNode;
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+const ProcessNode = ({ 
+  icon: Icon, 
+  title, 
+  status, 
+  children, 
+  isExpanded, 
+  onToggle 
+}: ProcessNodeProps) => {
+  const isActive = status === 'active';
+  const isCompleted = status === 'completed';
+  
+  return (
+    <div className={`relative z-10 rounded-xl border ${isActive ? 'border-blue-400 bg-blue-50/50' : 'border-slate-200 bg-white'} transition-all duration-500 overflow-hidden shadow-sm`}>
+      <div 
+        className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
+        onClick={onToggle}
+      >
+        <div className="flex items-center gap-3">
+          <div className={`
+            w-8 h-8 rounded-full flex items-center justify-center transition-colors duration-300
+            ${isActive ? 'bg-blue-600 text-white animate-pulse' : ''}
+            ${isCompleted ? 'bg-green-600 text-white' : 'bg-slate-100 text-slate-400'}
+          `}>
+            {isActive ? <Loader2 size={16} className="animate-spin" /> : (isCompleted ? <CheckCircle2 size={16} /> : <Icon size={16} />)}
+          </div>
+          <div>
+            <h3 className={`text-sm font-semibold ${isActive ? 'text-blue-900' : (isCompleted ? 'text-slate-800' : 'text-slate-500')}`}>
+              {title}
+            </h3>
+            {isActive && <p className="text-xs text-blue-600">Processing...</p>}
+          </div>
+        </div>
+        {children && (
+          <div className="text-slate-400 hover:text-slate-700">
+            {isExpanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
+          </div>
+        )}
+      </div>
+      
+      {isExpanded && children && (
+        <div className="border-t border-slate-100 bg-slate-50/50 p-4 animate-in slide-in-from-top-2 duration-300">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProcessNode;