42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { Ref } from "vue";
|
|
import { onMounted, ref } from "vue";
|
|
import { fetchMenteeCount } from "@/services/dashboard";
|
|
import BaseBox from "@/components/dashboard/BaseBox.vue";
|
|
|
|
const props = defineProps<{
|
|
courseId: string;
|
|
courseSlug: string;
|
|
}>();
|
|
|
|
const menteeCount: Ref<number> = ref(0);
|
|
|
|
onMounted(async () => {
|
|
const data = await fetchMenteeCount(props.courseId);
|
|
menteeCount.value = data?.mentee_count;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-[325px]">
|
|
<BaseBox
|
|
:details-link="`/dashboard/persons?course=${props.courseId}`"
|
|
data-cy="dashboard.mentor.competenceSummary"
|
|
>
|
|
<template #title>{{ $t("a.Personen") }}</template>
|
|
<template #content>
|
|
<div class="flex flex-row space-x-3 bg-white pb-6">
|
|
<div
|
|
class="flex h-[74px] items-center justify-center py-1 pr-3 text-3xl font-bold"
|
|
>
|
|
<span>{{ menteeCount }}</span>
|
|
</div>
|
|
<p class="ml-3 mt-0 leading-[74px]">
|
|
{{ $t("a.Personen, die du begleitest") }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</BaseBox>
|
|
</div>
|
|
</template>
|