55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type {Circle, LearningContent} from '@/types';
|
|
|
|
const props = defineProps<{
|
|
circleData: Circle,
|
|
learningContent: LearningContent,
|
|
}>()
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="learningContent">
|
|
<nav
|
|
class="
|
|
px-8
|
|
py-4
|
|
lg:flex lg:justify-between lg:items-center
|
|
border-b border-gray-500
|
|
"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn-text inline-flex items-center px-3 py-2 font-normal"
|
|
@click="$emit('close')"
|
|
>
|
|
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
|
|
<span class="">zurück zum Circle</span>
|
|
</button>
|
|
|
|
<h1 class="text-xl">{{ learningContent.title }}</h1>
|
|
|
|
<button type="button" class="btn-blue">Abschliessen und weiter</button>
|
|
</nav>
|
|
|
|
|
|
<div class="mx-auto max-w-5xl px-8 py-4">
|
|
<p>{{ learningContent.contents[0].value.description }}</p>
|
|
|
|
<iframe
|
|
class="mt-8 w-full aspect-video"
|
|
:src="learningContent.contents[0].value.url"
|
|
:title="learningContent.title"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen>
|
|
</iframe>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|