feat: Contacts layout

app/javascript/dashboard/components-next/CardLayout.vue

@@ -1,11 +1,13 @@
 <script setup>
-const props = defineProps({
+defineProps({
   layout: {
     type: String,
     default: 'col',
   },
 });
+
 const emit = defineEmits(['click']);
+
 const handleClick = () => {
   emit('click');
 };
@@ -13,11 +15,19 @@ const handleClick = () => {
 
 <template>
   <div
-    class="relative flex w-full gap-3 px-6 py-5 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
-    :class="props.layout === 'col' ? 'flex-col' : 'flex-row'"
-    @click="handleClick"
+    class="relative flex flex-col w-full shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
   >
-    <slot name="header" />
-    <slot name="footer" />
+    <div
+      class="flex w-full gap-3 px-6 py-5"
+      :class="
+        layout === 'col' ? 'flex-col' : 'flex-row justify-between items-center'
+      "
+      @click="handleClick"
+    >
+      <slot name="header" />
+      <slot name="footer" />
+    </div>
+
+    <slot name="expanded" />
   </div>
 </template>