Spaces:
Sleeping
Sleeping
| import { | |
| CheckCircle2, XCircle, Clock, Loader2, SkipForward, Send, Zap, Square, Eye, | |
| } from "lucide-react"; | |
| const STATUS_CONFIG = { | |
| queued: { icon: Clock, color: "text-[var(--c-text-muted)]", bg: "bg-[var(--c-bg-subtle)]", border: "border-[var(--c-border)]", label: "Queued" }, | |
| generating: { icon: Loader2, color: "text-indigo-500 dark:text-indigo-400", bg: "bg-indigo-500/5", border: "border-indigo-500/10", label: "Generating", spin: true }, | |
| ready: { icon: Eye, color: "text-amber-600 dark:text-amber-300", bg: "bg-amber-500/10", border: "border-amber-500/20", label: "Ready" }, | |
| sending: { icon: Loader2, color: "text-indigo-600 dark:text-indigo-300", bg: "bg-indigo-500/10", border: "border-indigo-500/20", label: "Sending", spin: true }, | |
| sent: { icon: CheckCircle2, color: "text-emerald-700 dark:text-emerald-300", bg: "bg-emerald-500/10", border: "border-emerald-500/20", label: "Sent" }, | |
| skipped: { icon: SkipForward, color: "text-[var(--c-text-muted)]", bg: "bg-[var(--c-bg-subtle)]", border: "border-[var(--c-border)]", label: "Skipped" }, | |
| failed: { icon: XCircle, color: "text-red-500 dark:text-red-400", bg: "bg-red-500/5", border: "border-red-500/10", label: "Failed" }, | |
| }; | |
| export default function EmailQueue({ queue, currentIndex, stats, batchMode, autoRunning, onSelect, onApprove, onSkip, onAutoRun, onStopAuto }) { | |
| if (!queue || queue.length === 0) return null; | |
| const total = queue.length; | |
| const sent = stats?.sent || 0; | |
| const failed = stats?.failed || 0; | |
| const skipped = stats?.skipped || 0; | |
| const done = sent + failed + skipped; | |
| const progress = total > 0 ? (done / total) * 100 : 0; | |
| return ( | |
| <div className="sticky bottom-0 bg-[var(--c-bg-primary)]/80 backdrop-blur-xl border-t border-[var(--c-border)] px-6 py-3 transition-colors duration-300 z-30"> | |
| <div className="flex items-center justify-between mb-2"> | |
| <div className="flex items-center gap-3 text-[11px]"> | |
| <span className="font-bold text-[var(--c-text-primary)]">{sent}/{total}</span> | |
| <span className="text-[var(--c-text-muted)]">sent</span> | |
| {skipped > 0 && <span className="text-[var(--c-text-muted)]">{skipped} skipped</span>} | |
| {failed > 0 && <span className="text-red-500 dark:text-red-400 font-medium">{failed} failed</span>} | |
| {autoRunning && <span className="flex items-center gap-1 text-indigo-500 dark:text-indigo-400 font-medium"><Loader2 size={10} className="animate-spin" /> Running...</span>} | |
| </div> | |
| <div className="flex items-center gap-2"> | |
| {batchMode === "auto" && !autoRunning && sent < total && ( | |
| <button onClick={onAutoRun} className="flex items-center gap-1.5 px-4 py-1.5 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white text-[11px] font-bold rounded-lg transition-all shadow-lg shadow-emerald-500/15"> | |
| <Zap size={11} /> Auto-Send All | |
| </button> | |
| )} | |
| {autoRunning && ( | |
| <button onClick={onStopAuto} className="flex items-center gap-1.5 px-4 py-1.5 bg-red-500/20 hover:bg-red-500/30 text-red-500 dark:text-red-400 border border-red-500/20 text-[11px] font-semibold rounded-lg transition-all"> | |
| <Square size={11} /> Stop | |
| </button> | |
| )} | |
| </div> | |
| </div> | |
| <div className="w-full bg-gray-200 dark:bg-white/[0.04] rounded-full h-1 mb-3 overflow-hidden"> | |
| <div className="bg-gradient-to-r from-emerald-400 to-teal-400 h-1 rounded-full transition-all duration-700 ease-out" style={{ width: `${progress}%` }} /> | |
| </div> | |
| <div className="flex gap-1.5 overflow-x-auto pb-1"> | |
| {queue.map((item, i) => { | |
| const config = STATUS_CONFIG[item.status] || STATUS_CONFIG.queued; | |
| const Icon = config.icon; | |
| const isActive = i === currentIndex; | |
| return ( | |
| <div key={i} className="shrink-0 flex flex-col items-center gap-0.5"> | |
| <button onClick={() => onSelect?.(i)} | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-medium transition-all border ${isActive ? "bg-indigo-500/20 text-indigo-600 dark:text-indigo-300 border-indigo-500/30 shadow-lg shadow-indigo-500/10" : `${config.bg} ${config.color} ${config.border} hover:brightness-110` | |
| }`} | |
| title={`${item.email} — ${config.label}${item.error ? ": " + item.error : ""}`}> | |
| <Icon size={11} className={config.spin ? "animate-spin" : ""} /> | |
| <span className="max-w-[90px] truncate">{item.email?.split("@")[0] || item.input}</span> | |
| </button> | |
| {isActive && item.status === "ready" && batchMode === "manual" && ( | |
| <div className="flex gap-1 mt-0.5"> | |
| <button onClick={() => onApprove?.(i)} className="flex items-center gap-0.5 px-2 py-0.5 bg-emerald-500 hover:bg-emerald-400 text-white rounded text-[9px] font-semibold transition-colors" title="Send"><Send size={8} /> Send</button> | |
| <button onClick={() => onSkip?.(i)} className="px-2 py-0.5 bg-gray-100 dark:bg-white/5 text-gray-500 dark:text-[#5a5a72] hover:bg-gray-200 dark:hover:bg-white/10 rounded text-[9px] font-medium transition-colors" title="Skip">Skip</button> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| })} | |
| </div> | |
| </div> | |
| ); | |
| } | |