38 lines
1.4 KiB
Vue
38 lines
1.4 KiB
Vue
<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">{{ start }} - {{ end }}</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">{{ 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">{{ trainer }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { CourseSessionAttendanceCourse } from "@/types";
|
|
import dayjs from "dayjs";
|
|
import LocalizedFormat from "dayjs/plugin/localizedFormat";
|
|
import { computed } from "vue";
|
|
|
|
export interface Props {
|
|
attendanceCourse: CourseSessionAttendanceCourse;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
dayjs.extend(LocalizedFormat);
|
|
const format = "LLLL";
|
|
const start = computed(() => dayjs(props.attendanceCourse.start).format(format));
|
|
const end = computed(() => dayjs(props.attendanceCourse.end).format(format));
|
|
const location = computed(() => props.attendanceCourse.location);
|
|
const trainer = computed(() => props.attendanceCourse.trainer);
|
|
</script>
|