62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { convertBase64ToImageSrc } from "@/utils/base64ToImage.ts";
|
|
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
const { t } = useI18n();
|
|
const props = defineProps<{ learningPaths: LearningPath[] }>();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="results-grid"
|
|
v-if="props.learningPaths.length > 0"
|
|
>
|
|
<v-card
|
|
class="learning-path-card"
|
|
link
|
|
:to="`/learningPath/${learningPath.hruid}/${learningPath.language}/${learningPath.startNode.learningobjectHruid}`"
|
|
:key="`${learningPath.hruid}/${learningPath.language}`"
|
|
v-for="learningPath in props.learningPaths"
|
|
>
|
|
<v-img
|
|
height="300px"
|
|
:src="convertBase64ToImageSrc(learningPath.image)"
|
|
cover
|
|
v-if="learningPath.image"
|
|
></v-img>
|
|
<v-card-title class="learning-path-title">{{ learningPath.title }}</v-card-title>
|
|
<v-card-subtitle>
|
|
<v-icon icon="mdi-human-male-boy"></v-icon>
|
|
<span>{{ learningPath.targetAges.min }} - {{ learningPath.targetAges.max }} {{ t("yearsAge") }}</span>
|
|
</v-card-subtitle>
|
|
<v-card-text>{{ learningPath.description }}</v-card-text>
|
|
</v-card>
|
|
</div>
|
|
<div
|
|
content="empty-state-container"
|
|
v-else
|
|
>
|
|
<v-empty-state
|
|
icon="mdi-emoticon-sad-outline"
|
|
:title="t('noLearningPathsFound')"
|
|
:text="t('noLearningPathsFoundDescription')"
|
|
></v-empty-state>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.learning-path-card {
|
|
width: 300px;
|
|
}
|
|
.learning-path-title {
|
|
white-space: normal;
|
|
}
|
|
.results-grid {
|
|
margin: 20px auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
</style>
|