Add DateEmbedding component

client/src/components/dueDates/DateEmbedding.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { getDateString, getTimeString } from "@/components/dueDates/dueDatesUtils";
+import type { Dayjs } from "dayjs";
+import { defineProps } from "vue";
+
+const props = defineProps<{
+  singleDate: Dayjs;
+}>();
+</script>
+
+<template>
+  <span>
+    <it-icon-calendar-light class="it-icon h-5 w-5" />
+    {{ getDateString(props.singleDate) }}, {{ getTimeString(props.singleDate) }}
+  </span>
+</template>

client/src/components/dueDates/dueDatesUtils.ts

@@ -28,11 +28,11 @@ export const formatDate = (start: Dayjs, end: Dayjs) => {
   )}`;
 };
 
-const getTimeString = (date: Dayjs) => {
+export const getTimeString = (date: Dayjs) => {
   return `${date.format("H:mm")}`;
 };
 
-const getDateString = (date: Dayjs) => {
+export const getDateString = (date: Dayjs) => {
   return `${date.format("D. MMMM YYYY")}`;
 };
 

client/src/pages/StyleGuidePage.vue

@@ -216,6 +216,15 @@ function log(data: any) {
         ls-end
         <it-icon-ls-end />
       </div>
+
+      <div class="inline-flex flex-col">
+        calendar
+        <it-icon-calendar />
+      </div>
+      <div class="inline-flex flex-col">
+        calendar-light
+        <it-icon-calenda-light />
+      </div>
     </div>
 
     <div class="mb-8 mt-8 flex flex-col flex-wrap gap-4 lg:flex-row">

client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import DateEmbedding from "@/components/dueDates/DateEmbedding.vue";
 import type { Assignment } from "@/types";
 import { useRouteQuery } from "@vueuse/router";
 import type { Dayjs } from "dayjs";
@@ -37,12 +38,8 @@ const step = useRouteQuery("step");
 
   <h3 class="mb-4 mt-8">{{ $t("assignment.dueDateTitle") }}</h3>
   <p v-if="props.dueDate" class="text-large">
-    {{
+    {{ $t("assignment.dueDateIntroduction") }}
-      $t("assignment.dueDateIntroduction", {
+    <DateEmbedding :single-date="dueDate"></DateEmbedding>
-        date: dueDate!.format("DD.MM.YYYY"),
-        time: dueDate!.format("HH:mm"),
-      })
-    }}
   </p>
   <p v-else class="text-large">
     {{ $t("assignment.dueDateNotSet") }}

server/vbv_lernwelt/static/icons/icon-calendar-light.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Outline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+    <path
+        d="m23.71,4.86h-2.86v-1.53c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.53h-8.71v-1.53c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.53h-2.86c-1.24,0-2.25,1.01-2.25,2.25v15.77c0,1.24,1.01,2.25,2.25,2.25h17.43c1.24,0,2.25-1.01,2.25-2.25V7.11c0-1.24-1.01-2.25-2.25-2.25Zm-17.43,1.5h17.43c.41,0,.75.34.75.75v2.21H5.54v-2.21c0-.41.34-.75.75-.75Zm17.43,17.27H6.29c-.41,0-.75-.34-.75-.75v-12.06h18.93v12.06c0,.41-.34.75-.75.75Z"/>
+</svg>