File size: 6,716 Bytes
5301ae9 5940a39 5301ae9 5940a39 5301ae9 5940a39 5301ae9 5940a39 5301ae9 5940a39 5301ae9 5940a39 5301ae9 5940a39 5301ae9 5940a39 5301ae9 5940a39 5301ae9 5940a39 5301ae9 5940a39 5301ae9 | 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 124 125 126 127 128 129 | import React, { useState } from 'react';
import { User, Building2, Mail, ChevronDown, ChevronUp, Copy, CheckCircle2 } from 'lucide-react';
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { motion } from 'framer-motion';
export default function SequenceCard({ contact, index }) {
const [isExpanded, setIsExpanded] = useState(index < 3);
const [copiedEmailNum, setCopiedEmailNum] = useState(null);
const [expandedEmailNum, setExpandedEmailNum] = useState(null);
// Group emails by contact
const emails = contact.emails || [];
const firstEmail = emails[0] || contact;
const handleCopy = (emailContent, emailNum) => {
navigator.clipboard.writeText(emailContent);
setCopiedEmailNum(emailNum);
setTimeout(() => setCopiedEmailNum(null), 2000);
};
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, delay: index * 0.05 }}
className="rounded-xl border border-slate-200 bg-white overflow-hidden hover:shadow-md transition-shadow"
>
<div
className="px-5 py-4 flex items-center justify-between cursor-pointer hover:bg-slate-50/50 transition-colors"
onClick={() => setIsExpanded(!isExpanded)}
>
<div className="flex items-center gap-4">
<div className="h-10 w-10 rounded-full bg-gradient-to-br from-violet-500 to-purple-600
flex items-center justify-center text-white font-semibold text-sm">
{firstEmail.firstName?.[0]}{firstEmail.lastName?.[0]}
</div>
<div>
<h4 className="font-semibold text-slate-800">
{firstEmail.firstName} {firstEmail.lastName}
</h4>
<div className="flex items-center gap-3 text-sm text-slate-500">
<span className="flex items-center gap-1">
<Building2 className="h-3.5 w-3.5" />
{firstEmail.company}
</span>
<span className="flex items-center gap-1">
<Mail className="h-3.5 w-3.5" />
{firstEmail.email}
</span>
{emails.length > 1 && (
<span className="text-violet-600 font-medium">
{emails.length} emails
</span>
)}
</div>
</div>
</div>
<div className="flex items-center gap-3">
<Badge className="bg-violet-100 text-violet-700 hover:bg-violet-100">
{firstEmail.product}
</Badge>
{isExpanded ? (
<ChevronUp className="h-5 w-5 text-slate-400" />
) : (
<ChevronDown className="h-5 w-5 text-slate-400" />
)}
</div>
</div>
{isExpanded && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
className="border-t border-slate-100"
>
<div className="px-5 py-4 bg-slate-50/50 space-y-4">
{emails.map((email, emailIdx) => (
<div key={emailIdx} className="bg-white rounded-lg border border-slate-200 p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<h5 className="text-sm font-medium text-slate-600">
Email {email.emailNumber || emailIdx + 1}
</h5>
{emails.length > 1 && (
<Badge variant="outline" className="text-xs">
{email.emailNumber || emailIdx + 1} of {emails.length}
</Badge>
)}
</div>
<Button
variant="ghost"
size="sm"
onClick={(e) => {
e.stopPropagation();
handleCopy(email.emailContent, email.emailNumber || emailIdx + 1);
}}
className="h-8 text-slate-500 hover:text-violet-600"
>
{copiedEmailNum === (email.emailNumber || emailIdx + 1) ? (
<>
<CheckCircle2 className="h-4 w-4 mr-1 text-green-500" />
Copied!
</>
) : (
<>
<Copy className="h-4 w-4 mr-1" />
Copy
</>
)}
</Button>
</div>
<div className="mb-3 pb-3 border-b border-slate-100">
<span className="text-xs text-slate-400 uppercase tracking-wide">Subject</span>
<p className="text-sm font-medium text-slate-800 mt-1">{email.subject}</p>
</div>
<div className="text-sm text-slate-700 whitespace-pre-wrap leading-relaxed">
{email.emailContent}
</div>
</div>
))}
</div>
</motion.div>
)}
</motion.div>
);
}
|