Refactor LearningContentSimpleLayout component

client/src/pages/learningPath/learningContentPage/blocks/IframeBlock.vue

@@ -1,8 +1,5 @@
 <template>
-  <LearningContentSimpleLayout
+  <LearningContentSimpleLayout learning-content-type="resource">
-    :subtitle="learningContentTypeData('resource').title"
-    :learning-content-type="'resource'"
-  >
     <div class="h-screen">
       <iframe width="100%" height="100%" scrolling="no" :src="value.url" />
     </div>
@@ -12,13 +9,12 @@
 <script setup lang="ts">
 import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
 import type { LearningContent } from "@/types";
-import { learningContentTypeData } from "@/utils/typeMaps";
 
-interface Value {
+export interface Value {
   url: string;
 }
 
-const props = defineProps<{
+defineProps<{
   value: Value;
   content: LearningContent;
 }>();

client/src/pages/learningPath/learningContentPage/blocks/MediaLibraryBlock.vue

@@ -1,8 +1,7 @@
 <template>
   <LearningContentSimpleLayout
     :title="content.title"
-    :subtitle="learningContentTypeData('media_library').title"
+    learning-content-type="media_library"
-    :learning-content-type="'media_library'"
   >
     <div class="container-medium">
       <p class="text-large my-4 lg:my-8">{{ value.description }}</p>
@@ -16,16 +15,15 @@
 <script setup lang="ts">
 import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
 import type { LearningContent } from "@/types";
-import { learningContentTypeData } from "@/utils/typeMaps";
 import { useRoute } from "vue-router";
 
-const route = useRoute();
+export interface Value {
-
-interface Value {
   description: string;
   url: string;
 }
 
+const route = useRoute();
+
 defineProps<{
   value: Value;
   content: LearningContent;

client/src/pages/learningPath/learningContentPage/blocks/PlaceholderBlock.vue

@@ -1,21 +1,19 @@
 <template>
   <LearningContentSimpleLayout
     :title="content.title"
-    :subtitle="learningContentTypeData('placeholder').title"
+    learning-content-type="placeholder"
-    :learning-content-type="'placeholder'"
   ></LearningContentSimpleLayout>
 </template>
 
 <script setup lang="ts">
 import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
 import type { LearningContent } from "@/types";
-import { learningContentTypeData } from "@/utils/typeMaps";
 
-interface Value {
+export interface Value {
   description: string;
 }
 
-const props = defineProps<{
+defineProps<{
   value: Value;
   content: LearningContent;
 }>();

client/src/pages/learningPath/learningContentPage/blocks/VideoBlock.vue

@@ -1,9 +1,5 @@
 <template>
-  <LearningContentSimpleLayout
+  <LearningContentSimpleLayout :title="content.title" learning-content-type="video">
-    :title="content.title"
-    :subtitle="learningContentTypeData('video').title"
-    :learning-content-type="'video'"
-  >
     <div class="container-medium">
       <iframe
         class="mt-8 aspect-video w-full"
@@ -20,13 +16,12 @@
 <script setup lang="ts">
 import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
 import type { LearningContent } from "@/types";
-import { learningContentTypeData } from "@/utils/typeMaps";
 
-interface Value {
+export interface Value {
   url: string;
 }
 
-const props = defineProps<{
+defineProps<{
   value: Value;
   content: LearningContent;
 }>();

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

@@ -4,15 +4,16 @@ import LearningContentFooter from "@/pages/learningPath/learningContentPage/layo
 import type { LearningContentType } from "@/types";
 import { learningContentTypeData } from "@/utils/typeMaps";
 
-interface Props {
+export interface Props {
-  title: string | undefined;
+  title: string;
-  subtitle: string;
   learningContentType: LearningContentType;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  title: undefined,
+  title: "",
 });
+
+const type = learningContentTypeData(props.learningContentType);
 </script>
 
 <template>
@@ -21,12 +22,9 @@ const props = withDefaults(defineProps<Props>(), {
       v-if="props.learningContentType !== 'placeholder'"
       class="flex h-min w-full items-center gap-2 pb-8"
     >
-      <component
+      <component :is="type.icon" class="h-6 w-6 text-gray-900"></component>
-        :is="learningContentTypeData(props.learningContentType).icon"
-        class="h-6 w-6 text-gray-900"
-      ></component>
       <p class="whitespace-nowrap text-gray-900">
-        {{ props.subtitle }}
+        {{ type.title }}
       </p>
     </div>
 

client/src/utils/typeMaps.ts

@@ -1,10 +1,12 @@
 import type { LearningContentType } from "@/types";
 import { assertUnreachable } from "@/utils/utils";
 
-export function learningContentTypeData(t: LearningContentType): {
+export interface LearningContentIdentifier {
   title: string;
   icon: string;
-} {
+}
+
+export function learningContentTypeData(t: LearningContentType): LearningContentIdentifier {
   switch (t) {
     case "assignment":
       return { title: "Transferauftrag", icon: "it-icon-lc-assignment" };