feat: add multiple trainers/experts

client/src/pages/learningPath/circlePage/CirclePage.vue

@@ -97,13 +97,26 @@ const { data: mentors } = useCSRFFetch(
   `/api/mentor/${courseSession.value.id}/mentors`
 ).json();
 
-const expert = computed(() => {
+interface Expert {
+  id: string;
+  email: string;
+  avatar_url: string;
+  first_name: string;
+  last_name: string;
+}
+
+interface Mentor {
+  id: number;
+  mentor: Expert;
+}
+
+const experts = computed<Expert[] | null>(() => {
   if (courseConfig.value.showContact) {
     if (lpQueryResult.course.value?.circle_contact_type === "EXPERT") {
-      return circleExperts.value[0];
+      return circleExperts.value;
     } else if (lpQueryResult.course.value?.circle_contact_type === "LEARNING_MENTOR") {
       if (mentors.value?.length > 0) {
-        return mentors.value[0].mentor;
+        return mentors.value.map((m: Mentor) => m.mentor);
       }
     }
   }
@@ -246,23 +259,27 @@ watch(
                         })
                       }}
                     </div>
-                    <template v-if="expert">
-                      <div class="mb-6 mt-4 flex flex-row items-center">
-                        <img
-                          class="mr-2 h-[45px] rounded-full"
-                          :src="
-                            expert.avatar_url ||
-                            '/static/avatars/myvbv-default-avatar.png'
-                          "
-                        />
-                        <p class="lg:leading-[45px]">
-                          {{ expert.first_name }} {{ expert.last_name }}
-                        </p>
+
+                    <div
+                      v-for="expert in experts"
+                      :key="expert.id"
+                      class="mb-6 mt-6 flex flex-row items-center space-x-2 last:mb-0"
+                    >
+                      <img
+                        class="h-[48px] rounded-full"
+                        :alt="expert.last_name"
+                        :src="
+                          expert.avatar_url ||
+                          '/static/avatars/myvbv-default-avatar.png'
+                        "
+                      />
+                      <div class="flex flex-col">
+                        {{ expert.first_name }} {{ expert.last_name }}
+                        <a class="text-gray-800" :href="`mailto:${expert.email}`">
+                          {{ expert.email }}
+                        </a>
                       </div>
-                      <a :href="'mailto:' + expert.email" class="btn-secondary text-xl">
-                        {{ $t(courseConfig.contactButton) }}
-                      </a>
-                    </template>
+                    </div>
                   </div>
                 </div>
               </div>