35 lines
640 B
Vue
35 lines
640 B
Vue
|
<template>
|
||
|
|
<section class="event">
|
||
|
|
<h3>{{ event.name }}</h3>
|
||
|
|
<p>{{ event.description ?? "No description provided" }}</p>
|
||
|
|
<h4>Timeslots</h4>
|
||
|
|
<ul>
|
||
|
|
<li v-for="slot in event.slots" :key="slot.id">
|
||
|
|
{{ slot.start }} - {{ slot.end }}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import type { ScheduleEvent } from '~/shared/types/schedule';
|
||
|
|
|
||
|
|
defineProps<{
|
||
|
|
event: ScheduleEvent
|
||
|
|
}>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.event {
|
||
|
|
background: color-mix(in oklab, var(--background), grey 20%);
|
||
|
|
padding: 0.5rem;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
}
|
||
|
|
.event h3 {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.event + .event {
|
||
|
|
margin-block-start: 0.5rem;
|
||
|
|
}
|
||
|
|
</style>
|