46 lines
1.7 KiB
Vue
46 lines
1.7 KiB
Vue
<template>
|
|
<div class="flex fixed top-0 left-0 w-full h-full items-center justify-center p-6 z-40 bg-black/40"
|
|
@click.self="emit('close')">
|
|
<div
|
|
class="rounded bg-white p-4 shadow-2xl ring-1 ring-gray-900/5 relative text-gray-600 max-w-2xl max-h-full overflow-auto">
|
|
<h2 class="font-arvo text-primary text-sm md:text-base" v-text="event.name"></h2>
|
|
<div class="flex items-baseline text-sm">
|
|
<calendar-icon class="w-3 h-3 flex-none text-secondary"></calendar-icon>
|
|
<span class="text-sm font-semibold font-nunito text-gray-800 ml-2" v-text="event.dates"></span>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<img :src="event.image"
|
|
class="hidden sm:block w-24 float-left h-24 rounded-full border-secondary border-4 shape-circle" />
|
|
<content class="text-gray-800 font-nunito" :modelValue="event.description"></content>
|
|
</div>
|
|
<div class="flex mt-3">
|
|
<a :href="registerUrl.replace(':slug', event.slug)"
|
|
class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-primaryfg focus:outline-none bg-primary text-primaryfg">
|
|
Zur Anmeldung
|
|
</a>
|
|
</div>
|
|
<a class="absolute block mt-3 mr-3 right-0 top-0" href="#" @click.prevent="emit('close')">
|
|
<close-icon class="text-gray-700 w-5 h-5"></close-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import CalendarIcon from "./icons/CalendarIcon.vue";
|
|
import CloseIcon from "./icons/CloseIcon.vue";
|
|
import Content from "./Content.vue";
|
|
|
|
const emit = defineEmits(["close"]);
|
|
const props = defineProps({
|
|
event: {
|
|
required: true,
|
|
},
|
|
registerUrl: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
});
|
|
</script>
|