47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
|
|
defineProps(['learningSequence'])
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mb-8 learning-sequence">
|
|
<div class="flex items-center gap-4 mb-2">
|
|
<component :is="learningSequence.icon" />
|
|
<h3 class="text-xl">
|
|
{{ learningSequence.title }}
|
|
</h3>
|
|
<div>{{ learningSequence.minutes }} Minuten</div>
|
|
</div>
|
|
|
|
<div class="bg-white px-4 border border-gray-500 border-l-4 border-l-sky-500">
|
|
<div
|
|
v-for="learningPackage in learningSequence.learningPackages"
|
|
class="py-3"
|
|
>
|
|
<div class="pb-3 flex gap-4" v-if="learningPackage.title">
|
|
<div class="font-bold">{{ learningPackage.title }}</div>
|
|
<div>{{ learningPackage.minutes }} Minuten</div>
|
|
</div>
|
|
|
|
<div
|
|
v-for="learningUnit in learningPackage.learningUnits"
|
|
class="flex items-center gap-4 pb-3"
|
|
>
|
|
<it-icon-smiley-neutral v-if="learningUnit.contents[0].type === 'self_evaluation'"/>
|
|
<it-icon-checkbox-unchecked v-else/>
|
|
<div>{{ learningUnit.contents[0].type }}: {{ learningUnit.title }}</div>
|
|
</div>
|
|
|
|
<hr class="-mx-4 text-gray-500">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|