Add RegisterUrl to popup

src/Eventindex.ce.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))] font-nunito">
+  <div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fit,minmax(280px,max-content))] font-nunito justify-center">
     <a v-for="(event, index) in events" :key="index" href="#" @click.prevent="makeVisible(event)"
-      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">
-      <img :src="event.image" />
+      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 max-w-[400px]">
+      <img :src="event.image"
+        class="flex-none w-full h-auto transition-all transition-linear duration-200 [clip-path:circle(200%_at_50%_-90%)] group-hover:[clip-path:circle(200%_at_50%_-102%)]" />
       <div class="p-6 flex flex-col grow">
         <h2 class="font-arvo flex-none text-primary text-sm md:text-base" v-text="event.name"></h2>
         <div class="flex items-baseline text-sm">
@@ -17,7 +18,7 @@
     </a>
   </div>
 
-  <popup v-if="visibleEvent !== null" :event="visibleEvent" @close="hideEvent"></popup>
+  <popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent"></popup>
 </template>
 
 <script setup>

src/components/Popup.vue

@@ -1,40 +1,22 @@
 <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="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>
+      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>
+        <span class="text-sm font-semibold font-nunito text-gray-800 ml-2" v-text="event.dates"></span>
       </div>
 
-      <div
-        class="text-gray-800 mt-3 font-nunito"
-        v-html="event.description"
-      ></div>
+      <div class="text-gray-800 mt-3 font-nunito" v-html="event.description"></div>
       <div class="flex mt-3">
-        <a
-          href="#"
-          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"
-        >
+        <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')"
-      >
+      <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>
@@ -50,5 +32,9 @@ const props = defineProps({
   event: {
     required: true,
   },
+  registerUrl: {
+    required: true,
+    type: String,
+  },
 });
 </script>