Add modal with calendly && improve other modals design

components/modal/Calendly.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const { t } = useI18n();
+const options = {
+  url: 'https://calendly.com/anuness/30min',
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 mt-8 text-base-content">
+    <button class="daisyui-btn daisyui-btn-primary daisyui-btn-md 2xl:daisyui-btn-lg w-full relative" onclick="calendly_modal.showModal()">
+      {{ t('links.general.calendly') }}
+    </button>
+  </div>
+  <dialog id="calendly_modal" class="daisyui-modal daisyui-modal-bottom md:daisyui-modal-middle">
+    <div class="daisyui-modal-box max-h-5xl overflow-hidden">
+      <form method="dialog">
+        <button class="mt-4 daisyui-btn daisyui-btn-sm daisyui-btn-circle daisyui-btn-ghost absolute right-2 top-2">✕</button>
+      </form>
+      <h3 class="font-bold text-lg pb-4">{{ t('links.general.calendly') }}</h3>
+      <CalendlyInlineWidget v-bind="options" />
+    </div>
+    <form method="dialog" class="daisyui-modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
+</template>
+

components/modal/ChangeLanguage.vue

@@ -8,7 +8,7 @@ const availableLocales = useLanguage.availableLocales;
   <button class="daisyui-btn w-32 m:w-44" onclick="change_language.showModal()">
     {{ t('modal.language.button') }}
   </button>
-  <dialog id="change_language" class="daisyui-modal daisyui-modal-bottom sm:daisyui-modal-middle">
+  <dialog id="change_language" class="daisyui-modal daisyui-modal-bottom md:daisyui-modal-middle">
     <div class="daisyui-modal-box max-h-56 md:max-h-max overflow-hidden">
       <form method="dialog">
         <button class="mt-4 daisyui-btn daisyui-btn-sm daisyui-btn-circle daisyui-btn-ghost absolute right-2 top-2">✕</button>

components/modal/ChangeTheme.vue

@@ -8,7 +8,7 @@ const currentTheme = useTheme.currentTheme;
   <button class="daisyui-btn w-32 m:w-44" onclick="change_theme.showModal()">
     {{ t('modal.theme.button') }}
   </button>
-  <dialog id="change_theme" class="daisyui-modal daisyui-modal-bottom sm:daisyui-modal-middle">
+  <dialog id="change_theme" class="daisyui-modal daisyui-modal-bottom md:daisyui-modal-middle">
     <div class="daisyui-modal-box max-h-56 md:max-h-max overflow-hidden">
       <form method="dialog">
         <button class="mt-4 daisyui-btn daisyui-btn-sm daisyui-btn-circle daisyui-btn-ghost absolute right-2 top-2">✕</button>

nuxt.config.ts

@@ -26,11 +26,17 @@ export default defineNuxtConfig({
     'nuxt-seo-kit'
   ],
   modules: [
+    "nuxt-calendly",
     '@nuxtjs/tailwindcss',
     '@nuxtjs/device',
     '@dargmuesli/nuxt-cookie-control',
     '@nuxtjs/i18n',
   ],
+  calendly: {
+    isEnabled: true,
+    loadWidgetCSS: true,
+    loadWidgetCloseIconSvg: true
+  },
   devtools: { enabled: true },
   i18n: {
     defaultLocale: 'en',

package.json

@@ -17,6 +17,7 @@
     "@tailwindcss/typography": "^0.5.10",
     "daisyui": "^3.7.3",
     "nuxt": "^3.7.2",
+    "nuxt-calendly": "^0.1.15",
     "nuxt-seo-kit": "^1.3.13",
     "vitest": "^0.34.4"
   }

pages/[...slug].vue

@@ -79,15 +79,6 @@ useHeadSafe({
 });
 
 // TODO: Add integration with backend
-const general: LinksInterface[] = [
-  {
-    id: 'calendly',
-    title: computed(() => t('links.general.calendly')),
-    href: 'https://calendly.com/anuness',
-    target: '_blank',
-  },
-]
-
 const projects: LinksInterface[] = [
   {
     id: 'website',
@@ -139,7 +130,7 @@ const brands: LinksInterface[] = [
 
 <template>
   <div>
-    <AppLinks :links="general" />
+    <ModalCalendly />
     <AppLinks :title="t('links.projects.title')" :links="projects" />
     <AppLinks :title="t('links.brands.title')" :links="brands" />
   </div>