Contacts Table - Copy this Angular, Tailwind Component to your project

Je développe une application en Angular et j'aimerais générer un composant pour afficher et gérer un tableau de contacts (comme dans HubSpot) en utilisant Tailwind CSS pour le style. Voici les spécifications du tableau : Colonnes : Nom complet (Full Name). Email. Numéro de téléphone. Entreprise. Dernière interaction (Last Interaction). Actions (avec des icônes pour "Éditer" et "Supprimer"). Fonctionnalités : Chargement des données via un tableau d'exemple dans le fichier TypeScript. Pagination en bas du tableau avec un maximum de 10 contacts par page. Barre de recherche au dessus du tableau pour filtrer par nom ou email. Composant responsive pour s'adapter à différentes tailles d'écran. Édition de cellule en ligne : L'utilisateur peut cliquer sur une cellule (Nom, Email, etc.) pour la modifier. Une fois l'édition terminée (perte de focus ou touche "Entrée"), la modification est enregistrée localement et reflétée dans le tableau. Style : Utiliser Tailwind CSS pour styliser le tableau, les boutons, et la pagination. Ajouter une bordure subtile autour du tableau, avec une couleur de survol (hover) différente pour chaque ligne. Boutons d'action (Éditer, Supprimer) stylisés avec des icônes claires. Code attendu : Fichier Angular : HTML, TypeScript, et CSS (ou Tailwind intégré au HTML). Une structure modulaire avec un composant dédié au tableau (contacts table.component). Les dépendances nécessaires pour que le code fonctionne correctement. Merci de fournir un code propre, bien commenté et optimisé pour Angular 18. Assurez vous que l'édition des cellules fonctionne de manière fluide et intuitive.