displaye contacts in List View

src/components/Directory/ListViewDirectory.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+
+const getEmailIcon = (type) => {
+  switch (type) {
+    case 'work': return "bx bx-briefcase me-1 " ;
+    case 'personal': return "bx bx-user me-1";
+    case 'support': return "bxr headphone-mic me-1";
+    case 'billing': return "bx bx-receipt me-1";
+    default: return "bx bx-envelope me-1";
+  }
+};
+
+const getPhoneIcon = (type) => {
+  switch (type) {
+    case 'business': return "bx bx-briefcase me-1 ";
+    case 'home': return "bx bx-mobile me-1 ";
+    case 'personal': return "bx bx-user me-1 ";
+    case 'landline': return "bx bx-phone me-1 ";
+    case 'fax': return "bx bx-printer me-1";
+    case 'whatsapp': return "bxl-whatsapp me-1";
+    case 'emergency': return "bx bx-error-circle me-1";
+    default: return "bx bx-phone me-1";
+  }
+};
+
+const ListViewDirectory = ({ contact }) => {
+  return (
+    <tr key={contact.id} >
+      <td className="text-start">{`${contact.name}`}</td>
+
+      {/* Emails */}
+      <td colSpan="2">
+        <div className="d-flex flex-column align-items-start px-1">
+          {contact.contactEmails?.map((email, index) => (
+            <span key={email.id}>
+             <i className={getEmailIcon(email.label)} style={{fontSize:"12px"}}></i>
+              <a href={`mailto:${email.email}`} className="text-decoration-none">{email.emailAddress}</a>
+            </span>
+          ))}
+        </div>
+      </td>
+
+      {/* Phones */}
+      <td>
+        <div className="d-flex flex-column align-items-start">
+          {contact.contactPhones?.map((phone, index) => (
+            <span key={phone.id}>
+             <i className={getPhoneIcon(phone.label)} style={{fontSize:"12px"}}></i>
+              {phone.phoneNumber}
+            </span>
+          ))}
+        </div>
+      </td>
+
+      {/* Organization */}
+      <td className="text-start">{contact.organization}</td>
+
+      {/* Tags */}
+      <td>
+        <div className="d-flex flex-column align-items-start">
+          {contact.tags?.map((tag, index) => (
+            <span key={index} className="badge bg-light text-dark mb-1">{tag}</span>
+          ))}
+        </div>
+      </td>
+
+      {/* Actions */}
+  <td className="align-middle text-center ">
+        <i className='bx bx-edit bx-sm text-primary cursor-pointer'></i>
+         <i className='bx bx-trash bx-sm text-danger cursor-pointer'></i>
+      </td>
+    </tr>
+  );
+};
+
+export default ListViewDirectory;