Spaces:
Sleeping
Sleeping
| import { CheckCircle2, XCircle, AlertTriangle, Send, Loader2, ShieldCheck } from "lucide-react"; | |
| export default function VerifyPanel({ verification, onSend, sending }) { | |
| if (!verification) return null; | |
| return ( | |
| <div className={`rounded-xl border p-3.5 ${verification.valid ? "bg-emerald-500/5 border-emerald-500/20" : "bg-red-500/5 border-red-500/20" | |
| }`}> | |
| <div className="flex items-center gap-2 mb-3"> | |
| {verification.valid | |
| ? <ShieldCheck size={14} className="text-emerald-600 dark:text-emerald-400" /> | |
| : <AlertTriangle size={14} className="text-red-500 dark:text-red-400" />} | |
| <h3 className={`text-xs font-bold uppercase tracking-wider ${verification.valid ? "text-emerald-700 dark:text-emerald-300" : "text-red-600 dark:text-red-400"}`}> | |
| {verification.valid ? "Ready to Send" : "Issues Found"} | |
| </h3> | |
| </div> | |
| <div className="space-y-2 mb-3"> | |
| <VerifyItem ok={!verification.errors?.some((e) => e.includes("email"))} label="Email address valid" /> | |
| <VerifyItem ok={!verification.errors?.some((e) => e.includes("Subject"))} label="Subject line present" /> | |
| <VerifyItem ok={!verification.errors?.some((e) => e.includes("body"))} label="Email body present" /> | |
| <VerifyItem ok={verification.attachment_count >= 2} label={`${verification.attachment_count} attachment${verification.attachment_count !== 1 ? "s" : ""} (${(verification.attachments || []).join(", ")})`} /> | |
| {verification.already_sent && ( | |
| <div className="flex items-center gap-2 text-amber-600 dark:text-amber-400 text-[11px] mt-1"> | |
| <AlertTriangle size={12} /> | |
| <span>Already contacted this recipient</span> | |
| </div> | |
| )} | |
| </div> | |
| {verification.valid && ( | |
| <button onClick={onSend} disabled={sending} | |
| className="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400 disabled:opacity-50 text-white font-semibold text-xs py-3 rounded-xl transition-all shadow-lg shadow-emerald-500/20"> | |
| {sending ? <><Loader2 size={13} className="animate-spin" /> Sending...</> : <><Send size={13} /> Send Email</>} | |
| </button> | |
| )} | |
| {!verification.valid && ( | |
| <div className="bg-red-500/5 rounded-lg p-3 border border-red-500/10"> | |
| <p className="text-[10px] text-red-600 dark:text-red-400 font-semibold mb-1">Resolve before sending:</p> | |
| {verification.errors.map((err, i) => ( | |
| <p key={i} className="text-[10px] text-red-500/70 dark:text-red-400/70 mt-0.5">• {err}</p> | |
| ))} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |
| function VerifyItem({ ok, label }) { | |
| return ( | |
| <div className="flex items-center gap-2 text-[11px]"> | |
| {ok ? <CheckCircle2 size={12} className="text-emerald-600 dark:text-emerald-400 shrink-0" /> | |
| : <XCircle size={12} className="text-red-500 dark:text-red-400 shrink-0" />} | |
| <span className={ok ? "text-[var(--c-text-secondary)] font-medium" : "text-red-500 dark:text-red-400 font-medium"}>{label}</span> | |
| </div> | |
| ); | |
| } | |