Added ui card to add worlds / calendars

components/global/AddCard.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { PhPlusCircle } from "@phosphor-icons/vue";
+
+const emit = defineEmits(["on-click"])
+</script>
+
+<template>
+  <UiCard
+    class="h-full w-fit transition-all bg-transparent dark:hover:bg-gray-950 dark:focus-within:outline-gray-900 hover:-translate-y-0"
+    has-click
+    @on-click="emit('on-click')"
+  >
+    <UiCardHeader class="h-full justify-center items-center text-center gap-0">
+      <PhPlusCircle size="38" weight="fill" />
+
+      <UiCardTitle class="text-xl">
+        <slot />
+      </UiCardTitle>
+    </UiCardHeader>
+  </UiCard>
+</template>

components/ui/card/Card.vue

@@ -5,7 +5,10 @@ import { cn } from "@/lib/utils"
 const props = defineProps<{
   class?: HTMLAttributes["class"]
   link?: string
+  hasClick?: boolean
 }>()
+
+const emit = defineEmits(["on-click"])
 </script>
 
 <template>
@@ -13,7 +16,7 @@ const props = defineProps<{
     :class="
       cn('rounded-lg border bg-card text-card-foreground shadow-sm transition-all isolate', props.class, {
         'relative outline outline-2 outline-offset-4 outline-transparent hover:-translate-y-[.2rem]':
-          props.link
+          props.link || props.hasClick
       })
     "
   >
@@ -24,5 +27,9 @@ const props = defineProps<{
       :to="props.link"
       class="absolute inset-0 z-10 focus-visible:outline-none"
     />
+    <button
+      v-if="props.hasClick"
+      class="absolute inset-0 z-10 focus-visible:outline-none"
+      @click="emit('on-click')" />
   </div>
 </template>