adrema-form/src/components/DetailPopup.vue

39 lines
1.3 KiB
Vue

<template>
<popup :heading="event.name" @close="$emit('close')">
<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-font focus:outline-none bg-primary text-font"
>
Zur Anmeldung
</a>
</div>
</popup>
</template>
<script setup>
import CalendarIcon from './icons/CalendarIcon.vue';
import Content from './Content.vue';
import Popup from './Popup.vue';
const emit = defineEmits(['close']);
const props = defineProps({
event: {
required: true,
},
registerUrl: {
required: true,
type: String,
},
});
</script>