Spaces:
Paused
Paused
| import React from "react"; | |
| import { motion } from "framer-motion"; | |
| function SelectedContacts({ contacts, removeContact }) { | |
| return ( | |
| !!contacts.length && ( | |
| <div className="flex items-center flex-wrap gap-[.5rem]"> | |
| {contacts.map((contact) => ( | |
| <motion.div | |
| initial={{ scale: 0 }} | |
| animate={{ scale: 1 }} | |
| key={contact._id} | |
| onClick={() => removeContact(contact._id)} | |
| className="flex items-center bg-secondary-light-text pr-[1.5rem] gap-[1.5rem] rounded-full cursor-default" | |
| > | |
| {/* Avatar */} | |
| <img | |
| src={contact.contactDetails.avatar} | |
| alt={contact.name} | |
| className="w-[3.5rem] h-[3.5rem] rounded-full" | |
| /> | |
| <span className="">{contact.name}</span> | |
| </motion.div> | |
| ))} | |
| </div> | |
| ) | |
| ); | |
| } | |
| export default SelectedContacts; | |