Add new component for displaying an attendence day

client/src/pages/learningPath/learningContentPage/attendanceDay/AttendanceDay.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="mb-12 grid grid-cols-icon-card gap-x-4 grid-areas-icon-card">
+    <it-icon-calendar class="w-[60px] grid-in-icon" />
+    <h2 class="text-large font-bold grid-in-title">Datum</h2>
+    <p class="grid-in-value">{{ attendanceDay.date }}</p>
+  </div>
+  <div class="mb-12 grid grid-cols-icon-card gap-x-4 grid-areas-icon-card">
+    <it-icon-location class="w-[60px] grid-in-icon" />
+    <h2 class="text-large font-bold grid-in-title">Standort</h2>
+    <p class="grid-in-value">{{ attendanceDay.location }}</p>
+  </div>
+  <div class="grid grid-cols-icon-card content-between gap-x-4 grid-areas-icon-card">
+    <it-icon-trainer class="w-[60px] grid-in-icon" />
+    <h2 class="text-large font-bold grid-in-title">Trainer</h2>
+    <p class="grid-in-value">{{ attendanceDay.trainer }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CourseSessionAttendanceDay } from "@/types";
+
+export interface Props {
+  attendanceDay: CourseSessionAttendanceDay;
+}
+defineProps<Props>();
+</script>

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

@@ -2,13 +2,15 @@
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import type { LearningContent } from "@/types";
 import { computed } from "vue";
+import AttendanceDay from "../attendanceDay/AttendanceDay.vue";
+import LearningContentSimpleLayout from "../layouts/LearningContentSimpleLayout.vue";
 
-const courseSessionsStore = useCourseSessionsStore();
-
-interface Value {
+export interface Value {
   description: string;
 }
 
+const courseSessionsStore = useCourseSessionsStore();
+
 const props = defineProps<{
   value: Value;
   content: LearningContent;
@@ -20,12 +22,21 @@ const attendanceDay = computed(() => {
 </script>
 
 <template>
+  <LearningContentSimpleLayout
+    :title="content.title"
+    learning-content-type="attendance_day"
+  >
     <div class="container-medium">
       <div class="lg:mt-8">
         <div class="text-large my-4">
-        <div v-if="attendanceDay">{{ attendanceDay }}</div>
-        <div v-else>Für diese Durchführung existieren noch keine Details</div>
+          <div v-if="attendanceDay">
+            <AttendanceDay :attendance-day="attendanceDay" />
+          </div>
+          <div v-else>
+            Für diese Durchführung {{ content.id }} existieren noch keine Details
           </div>
         </div>
       </div>
+    </div>
+  </LearningContentSimpleLayout>
 </template>

client/src/utils/typeMaps.ts

@@ -31,7 +31,7 @@ export function learningContentTypeData(t: LearningContentType): LearningContent
     case "feedback":
       return { title: "Feedback", icon: "it-icon-lc-feedback" };
     case "attendance_day":
-      return { title: "Feedback", icon: "it-icon-lc-exercise" };
+      return { title: "Präsenztag", icon: "it-icon-lc-training" };
     case "placeholder":
       return { title: "In Umsetzung", icon: "it-icon-lc-document" };
   }

client/tailwind.config.js

@@ -50,10 +50,12 @@ module.exports = {
           "fst fst snd snd trd trd fth fth",
         ],
         "rating-scale-slim": ["bar bar bar", "fst mid fth"],
+        "icon-card": ["icon title", "icon value"]
       },
       gridTemplateColumns: {
         "horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",
         "horizontal-bar-chart-slim": "50px 1fr 78px 4fr 78px 1fr",
+        "icon-card": "60px auto"
       },
       gridTemplateRows: {
         "horizontal-bar-chart": "200px 40px",