vbv/client/src/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout...

38 lines
1.1 KiB
Vue

<script setup lang="ts">
// Basic layout for a learning content that only has a single step
import LearningContentFooter from "@/pages/learningPath/learningContentPage/layouts/LearningContentFooter.vue";
import type { LearningContentType } from "@/types";
import { learningContentTypeData } from "@/utils/typeMaps";
interface Props {
title: string | undefined;
subtitle: string;
learningContentType: LearningContentType;
}
const props = withDefaults(defineProps<Props>(), {
title: undefined,
});
</script>
<template>
<div class="container-medium">
<div
v-if="props.learningContentType !== 'placeholder'"
class="flex h-min w-full items-center gap-2 pb-8"
>
<component
:is="learningContentTypeData(props.learningContentType).icon"
class="h-6 w-6 text-gray-900"
></component>
<p class="whitespace-nowrap text-gray-900">
{{ props.subtitle }}
</p>
</div>
<h2 v-if="props.title" data-cy="ln-title">{{ props.title }}</h2>
</div>
<slot></slot>
<LearningContentFooter></LearningContentFooter>
</template>