feat: Contact card with expand view

2024-11-04 15:15:17 +05:30
parent f341d159c2
commit dd9e9286b3
7 changed files with 410 additions and 3 deletions
@@ -0,0 +1,35 @@
+<script setup>
+import { ref } from 'vue';
+import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
+
+defineProps({
+  contacts: {
+    type: Array,
+    required: true,
+  },
+});
+
+// Manage expanded state here
+const expandedCardId = ref(null);
+
+const toggleExpanded = id => {
+  expandedCardId.value = expandedCardId.value === id ? null : id;
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <ContactsCard
+      v-for="contact in contacts"
+      :id="contact.id"
+      :key="contact.id"
+      :name="contact.name"
+      :email="contact.email"
+      :thumbnail="contact.thumbnail"
+      :phone-number="contact.phone_number"
+      :additional-attributes="contact.additional_attributes"
+      :is-expanded="expandedCardId === contact.id"
+      @toggle="toggleExpanded(contact.id)"
+    />
+  </div>
+</template>