Add event overview

index.html

@@ -12,6 +12,11 @@
             base-url="http://localhost:8000"
             editable
         ></event-form>
+        <event-overview
+            style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
+            url-pattern="/anmeldung/{slug}"
+            base-url="http://localhost:8000"
+        ></event-overview>
         <script type="module" src="src/main.js"></script>
     </body>
 </html>

src/Eventoverview.ce.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]">
+        <a v-for="(event, index) in events" :key="index" :href="props.urlPattern.replace('{slug}', event.slug)"
+            class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group">
+            <div class="p-6 flex flex-col">
+                <h2 class="font-arvo flex-none text-primary-700 text-sm md:text-base" v-text="event.name"></h2>
+                <div class="flex items-baseline text-sm">
+                    <calendar-icon class="w-3 h-3 text-primary"></calendar-icon>
+                    <span class="text-sm font-semibold text-gray-800 ml-2" v-text="event.dates"></span>
+                </div>
+                <div class="flex-grow c text-sm mt-3" v-text="event.excerpt"></div>
+                <div class="bg-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3">Zur
+                    Anmeldung</div>
+            </div>
+        </a>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CalendarIcon from './components/icons/CalendarIcon.vue';
+
+const props = defineProps({
+    baseUrl: {
+        required: true,
+        type: String,
+    },
+    urlPattern: {
+        required: true,
+        type: String,
+    },
+});
+
+axios.defaults.baseURL = props.baseUrl;
+
+const events = ref([]);
+
+async function reloadEvents() {
+    const results = await axios.get('/api/form');
+    events.value = results.data.data;
+}
+
+reloadEvents();
+</script>

src/components/icons/CalendarIcon.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg fill="none" stroke="currentColor" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M6 5V1m8 4V1M5 9h10M3 19h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z" />
+    </svg>
+</template>

src/main.js

@@ -2,7 +2,8 @@ import {defineCustomElement} from 'vue';
 import classes from './style.css?inline';
 import carousel from 'vue3-carousel/dist/carousel.css?inline';
 import carouselStyle from './carousel.css?inline';
-import Navigation from './components/Navigation.vue';
+import Eventoverview from './Eventoverview.ce.vue';
+import Eventform from './Eventform.ce.vue';
 
 import axios from 'axios';
 window.axios = axios;
@@ -11,7 +12,8 @@ window.hasKeys = function (object, expected) {
     return typeof object === 'object' && JSON.stringify(Object.keys(object).sort()) === JSON.stringify(expected.sort());
 };
 
-import Eventform from './Eventform.ce.vue';
 Eventform.styles = [classes, carousel, carouselStyle];
+Eventoverview.styles = [classes];
 
 customElements.define('event-form', defineCustomElement(Eventform));
+customElements.define('event-overview', defineCustomElement(Eventoverview));