create-nuxt-base 0.1.20 → 0.1.22

package/nuxt-base-template/package.json

@@ -3,56 +3,57 @@
   "private": true,
   "scripts": {
     "init": "npm install",
-    "reinit": "rm -rf node_modules && rm -rf package-lock.json && npx nuxt cleanup && npm cache clean --force && npm i",
+    "reinit": "rm -rf node_modules && rm -rf package-lock.json && yes | npx nuxt cleanup && npm cache clean --force && npm i",
     "build": "nuxt build",
-    "start": "nuxt dev --port 3100",
+    "build:test": "API_URL=123 nuxt build",
+    "start": "nuxt dev",
+    "start:test": "API_URL=123 node .output/server/index.mjs",
+    "generate-types": "GENERATE_TYPES=1 nuxt dev",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "test": "vitest",
-    "cy:open": "npx cypress open",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "lint": "eslint --ext .ts,.js,.vue .",
     "lint:fix": "eslint --ext .ts,.js,.vue . --fix",
-    "release": "standard-version && git push --follow-tags origin main",
-    "release:minor": "standard-version --release-as minor && git push --follow-tags origin main",
-    "release:major": "standard-version --release-as major && git push --follow-tags origin main"
+    "postbuild": "cd .output/server/node_modules/tslib; npm pkg set 'exports[.].import.node'='./tslib.es6.mjs'"
   },
   "dependencies": {
-    "@formkit/icons": "1.0.0-beta.15",
-    "@formkit/nuxt": "1.0.0-beta.15",
+    "@egoist/tailwindcss-icons": "1.2.0",
+    "@formkit/icons": "1.1.0",
+    "@formkit/nuxt": "1.1.0",
+    "@iconify-json/bi": "1.1.20",
     "@lenne.tech/nuxt-base": "latest",
-    "@vueuse/core": "10.1.2",
-    "@vueuse/nuxt": "10.1.2",
-    "pinia": "2.1.3"
+    "@vueuse/core": "10.4.1",
+    "@vueuse/integrations": "10.4.1",
+    "@vueuse/nuxt": "10.4.1",
+    "pinia": "2.1.6",
+    "tailwind-merge": "1.14.0"
   },
   "devDependencies": {
-    "@badeball/cypress-cucumber-preprocessor": "18.0.0",
-    "@cypress/webpack-preprocessor": "5.17.1",
-    "@lenne.tech/eslint-config-vue": "0.0.6",
-    "@nuxt/test-utils": "3.6.1",
-    "@nuxtjs/tailwindcss": "6.7.0",
-    "@vitejs/plugin-vue": "4.2.3",
-    "@vue/test-utils": "2.3.2",
-    "cypress": "12.14.0",
-    "eslint": "8.42.0",
+    "@kevinmarrec/nuxt-pwa": "0.17.0",
+    "@lenne.tech/eslint-config-vue": "0.0.10",
+    "@nuxt/devtools": "0.8.5",
+    "@nuxt/test-utils": "3.7.4",
+    "@nuxtjs/color-mode": "3.3.0",
+    "@nuxtjs/google-fonts": "3.0.2",
+    "@nuxtjs/tailwindcss": "6.8.0",
+    "@tailwindcss/forms": "0.5.6",
+    "@tailwindcss/typography": "0.5.10",
+    "@vitejs/plugin-vue": "4.3.4",
+    "@vue/test-utils": "2.4.1",
+    "eslint": "8.50.0",
     "jsdom": "22.1.0",
-    "nuxt": "3.6.1",
-    "standard-version": "9.5.0",
-    "ts-loader": "9.4.3",
-    "typescript": "5.1.3",
-    "vitest": "0.31.0"
+    "nuxt": "3.7.4",
+    "ts-loader": "9.4.4",
+    "typescript": "5.2.2",
+    "vitest": "0.34.2"
   },
   "overrides": {
-    "vue": "latest"
-  },
-  "cypress-cucumber-preprocessor": {
-    "nonGlobalStepDefinitions": true,
-    "json": {
-      "enabled": true
-    },
-    "stepDefinitions": [
-      "cypress/integrations/**/*.{js,ts}"
-    ]
+    "vue": "latest",
+    "@nuxt/test-utils": {
+      "vitest": "$vitest"
+    }
   }
 }

package/nuxt-base-template/src/app.vue

@@ -0,0 +1,8 @@
+<template>
+  <NuxtLayout>
+    <BaseModalContainer />
+    <BaseNotificationContainer />
+    <NuxtLoadingIndicator />
+    <NuxtPage />
+  </NuxtLayout>
+</template>

package/nuxt-base-template/src/assets/css/tailwind.css

@@ -1,5 +1,40 @@
 @tailwind base;
+
+@layer base {
+    body {
+        @apply transition-colors duration-300;
+    }
+    h1 {
+        @apply text-[32px] leading-[140%] lg:text-[66px] lg:leading-[140%] font-bold;
+    }
+    h2 {
+        @apply text-[28px] leading-[140%] lg:text-[51px] lg:leading-[140%] font-semibold;
+    }
+    h3 {
+        @apply text-[21px] leading-[140%] lg:text-[39px] lg:leading-[140%] font-bold;
+    }
+    h4 {
+        @apply text-[18px] leading-[140%] lg:text-[30px] lg:leading-[140%] font-bold;
+    }
+    h5 {
+        @apply text-[15px] leading-[140%] lg:text-[23px] lg:leading-[140%] font-bold;
+    }
+    h6 {
+        @apply text-[16px] leading-[140%] lg:text-[18px] lg:leading-[140%] font-bold;
+    }
+    p {
+        @apply text-[15px] leading-[140%] lg:text-[18px] lg:leading-[140%];
+    }
+    small {
+        @apply text-[14px] leading-[140%] lg:text-[16px] lg:leading-[140%];
+    }
+    a {
+        @apply text-[15px] leading-[140%] lg:text-[18px] lg:leading-[140%];
+    }
+    button {
+        @apply text-[15px] leading-[140%] lg:text-[18px] lg:leading-[140%] font-semibold;
+    }
+}
+
 @tailwind components;
 @tailwind utilities;
-
-/* Add applies here */

package/nuxt-base-template/src/components/ModalShare.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { ModalContext } from '~/composables/use-modal';
+import SocialMediaBubble from '~/components/SocialMediaBubble.vue';
+
+const props = defineProps<{ context: ModalContext }>();
+const { close } = useModal();
+const url = ref<string>('');
+
+onMounted(() => {
+  url.value = props.context.data?.link ? props.context.data?.link : window.location.href;
+});
+
+const copyUrl = () => {
+  useClipboard({ source: url.value }).copy();
+  useNotification().notify({ type: 'success', title: 'Erfolgreich', text: 'Link wurde erfolgreich kopiert!' });
+};
+
+const shareWith = (type: 'mail' | 'whatsapp' | 'facebook' | 'linkedin' | 'twitter') => {
+  switch (type) {
+    case 'mail':
+      open(`mailto:?subject=RegioKonneX&body=${encodeURIComponent(url.value)}`, '_blank');
+      break;
+    case 'whatsapp':
+      open(`https://api.whatsapp.com/send/?text=${encodeURIComponent(url.value)}`, '_blank');
+      break;
+    case 'facebook':
+      open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url.value)}`, '_blank');
+      break;
+    case 'linkedin':
+      open(`https://www.linkedin.com/shareArticle?url=${encodeURIComponent(url.value)}`, '_blank');
+      break;
+    case 'twitter':
+      open(`https://twitter.com/share?url=${encodeURIComponent(url.value)}`, '_blank');
+      break;
+  }
+};
+</script>
+
+<template>
+  <Modal class="p-10 relative" :show="context.show" :show-inner="context.showInner" :size="context.size" @cancel="context.closable ? close() : null">
+    <div class="flex items-center justify-center mb-4">
+      <div class="font-semibold text-xl dark:text-white">
+        Teilen
+      </div>
+      <button class="absolute top-5 right-5" @click="close()">
+        <span class="i-bi-x text-2xl hover:text-primary-500"></span>
+      </button>
+    </div>
+    <div class="text-center dark:text-white">
+      <div class="flex justify-around max-w-md mx-auto gap-3 py-2 mb-5 overflow-x-scroll">
+        <SocialMediaBubble title="E-Mail" bg-color="#bbbbbb" icon="i-bi-envelope" @click="shareWith('mail')" />
+        <SocialMediaBubble title="Whatsapp" bg-color="#25d366" icon="i-bi-whatsapp" @click="shareWith('whatsapp')" />
+        <SocialMediaBubble title="Facebook" bg-color="#3b5998" icon="i-bi-facebook" @click="shareWith('facebook')" />
+        <SocialMediaBubble title="LinkedIn" bg-color="#0a66c2" icon="i-bi-linkedin" @click="shareWith('linkedin')" />
+        <SocialMediaBubble title="X / Twitter" bg-color="#000000" icon="i-bi-twitter-x" @click="shareWith('twitter')" />
+      </div>
+      <div class="flex items-center gap-3 justify-between p-3 border border-gray-300 rounded-lg">
+        <span class="text-ellipsis overflow-hidden">
+          {{ url }}
+        </span>
+        <BaseButton size="sm" @click="copyUrl()">
+          Kopieren
+        </BaseButton>
+      </div>
+    </div>
+  </Modal>
+</template>

package/nuxt-base-template/src/components/SocialMediaBubble.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{
+  icon: string;
+  title: string;
+  bgColor: string;
+}>();
+</script>
+
+<template>
+  <button class="flex flex-col items-center group">
+    <span class="rounded-full w-14 h-14 flex items-center justify-center transition-all duration-300 group-hover:-translate-y-1" :style="{ 'background-color': bgColor }">
+      <span class="text-2xl text-white" :class="icon"></span>
+    </span>
+    <small class="text-sm font-light mt-2">{{ title }}</small>
+  </button>
+</template>

package/nuxt-base-template/src/components/base/BaseAccordion.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useElementSize } from '@vueuse/core';
+
+const props = withDefaults(defineProps<{
+  expanded?: boolean;
+}>(), {
+  expanded: false,
+});
+
+const show = ref(false);
+const contents = ref<HTMLElement>();
+
+watch(() => props.expanded, () => {
+  show.value = props.expanded;
+}, { immediate: true });
+
+
+const { height: targetHeight } = useElementSize(contents, undefined, {
+  box: 'border-box',
+});
+
+const height = computed(() => (show.value ? targetHeight.value : 0));
+</script>
+
+<template>
+  <div class="group border-b border-gray-800 bg-white dark:bg-gray-950 dark:border-gray-500 transition duration-500 hover:bg-gray-50">
+    <div class="flex cursor-pointer items-center justify-center p-5 md:p-6">
+      <div class="text-base text-gray-900 transition group-hover:text-gray-950 md:text-lg">
+        <slot name="title"></slot>
+      </div>
+
+      <div class="relative ml-auto flex items-center justify-center">
+        <span
+          :class="{ 'rotate-180': show, 'rotate-45': !show }"
+          class="i-bi-x h-5 w-5 text-gray-900 transition-transform duration-500 md:h-6 md:w-6 dark:bg-white"
+        ></span>
+      </div>
+    </div>
+
+    <div
+      :style="{
+        height: `${height}px`,
+      }"
+      class="overflow-hidden px-5 transition-[height] duration-500 will-change-[height] md:px-6"
+    >
+      <div ref="contents" class="space-y-4 pb-5 font-light leading-relaxed tracking-wide text-gray-900 md:pb-6">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>

package/nuxt-base-template/src/components/base/BaseButton.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge';
+import { NuxtLink } from '#components';
+import type { RouteLocationRaw } from 'vue-router';
+
+const props = withDefaults(
+  defineProps<{
+    href?: string;
+    to?: RouteLocationRaw;
+    appearance?: 'regular' | 'outline' | 'none';
+    size?: 'sm' | 'md' | 'lg' | 'auto' | 'calendar';
+    color?: 'primary' | 'secondary' | 'green' | 'yellow' | 'lightgrey' | 'lightprimary' | 'danger';
+    textColor?: 'white' | 'black' | 'primary' | 'fullblack' | 'gray' | '';
+    type?: 'submit' | 'button';
+    loading?: boolean;
+    loadingText?: string;
+    block?: boolean; // or width full
+  }>(),
+  {
+    appearance: 'regular',
+    size: 'md',
+    type: 'button',
+    color: 'primary',
+    textColor: '',
+    loading: false,
+    loadingText: 'Loading',
+    block: false,
+  },
+);
+
+const appearanceClasses: Record<typeof props.appearance, string> = {
+  regular: 'rounded-full text-white',
+  outline:
+    'rounded-full border border-primary bg-white hover:bg-primary-500 text-primary hover:text-white disabled:bg-transparent disabled:text-gray-400 disabled:border-gray-200',
+  none: 'bg-transparent border-transparent hover:text-primary-500 text-black hover:bg-transparent',
+};
+
+const sizeClasses: Record<typeof props.size, string> = {
+  sm: 'min-w-[110px] py-1.5 px-4 text-sm',
+  calendar: 'min-w-[23%] py-1.5 px-5 text-base',
+  md: 'min-w-[200px] py-2 px-3 text-base',
+  lg: 'min-w-[240px] py-3 px-4 text-lg',
+  auto: 'text-sm lg:text-lg',
+};
+
+const colorClasses: Record<typeof props.color, string> = {
+  primary: 'bg-primary-500 hover:bg-primary-400 text-primary-50',
+  secondary: 'bg-orange-500 hover:bg-orange-400 text-orange-50',
+  green: 'bg-green-500 hover:bg-green-400 text-green-50',
+  yellow: 'bg-yellow-500 hover:bg-yellow-400 text-yellow-950',
+  danger: 'bg-red-500 hover:bg-red-400 text-red-950',
+  lightgrey: 'bg-slate-100 text-slate-200',
+  lightprimary: 'bg-primary-300 text-primary-50',
+};
+
+const textColorClasses: Record<typeof props.textColor, string> = {
+  white: 'text-white',
+  black: 'text-black dark:text-white',
+  fullblack: 'text-black dark:text-black',
+  primary: 'text-primary',
+  gray: 'text-gray-400',
+  '': '',
+};
+
+const LoadingIcon = defineComponent({
+  render: () =>
+    h('svg', { fill: 'none', viewBox: '0 0 24 24', class: 'animate-spin h-5 w-5 text-white' }, [
+      h('circle', {
+        class: 'opacity-25',
+        cx: '12',
+        cy: '12',
+        r: '10',
+        stroke: 'currentColor',
+        'stroke-width': '4',
+      }),
+      h('path', {
+        class: 'opacity-75',
+        fill: 'currentColor',
+        d: 'M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z',
+      }),
+    ]),
+});
+const defaultClasses = 'duration-200 flex gap-2 justify-center items-center whitespace-nowrap text-center disabled:bg-gray-200 disabled:cursor-not-allowed disabled:text-gray-400';
+const classes = twMerge(defaultClasses, sizeClasses[props.size], colorClasses[props.color], appearanceClasses[props.appearance], textColorClasses[props.textColor]);
+</script>
+
+<template>
+  <component
+    :is="props.href ? 'a' : props.to ? NuxtLink : 'button'"
+    :class="[
+      classes,
+      {
+        'w-full': props.block,
+        'cursor-wait': props.loading,
+      },
+    ]"
+    :to="props.to"
+    :active-class="props.appearance === 'none' ? '!text-primary-500' : ''"
+    :href="props.href"
+    :type="props.type"
+  >
+    <LoadingIcon v-if="props.loading" />
+    <p v-if="props.loadingText && props.loading" v-text="props.loadingText"></p>
+    <slot v-else></slot>
+  </component>
+</template>

package/nuxt-base-template/src/components/base/BaseContainer.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="w-full px-4 max-w-7xl mx-auto">
+    <slot></slot>
+  </div>
+</template>

package/nuxt-base-template/src/components/base/BaseInfinityList.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  (event: 'loadMore'): void;
+}>();
+const scrollContainer = ref<HTMLElement | null>(null);
+let infinityScrollInProgress = false;
+
+const handleScroll = async () => {
+  let element = scrollContainer.value;
+  if (!infinityScrollInProgress && element && element.getBoundingClientRect().bottom < window.innerHeight) {
+    infinityScrollInProgress = true;
+
+    emit('loadMore');
+
+    setTimeout(() => {
+      infinityScrollInProgress = false;
+    }, 1000);
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll);
+});
+</script>
+
+<template>
+  <div ref="scrollContainer">
+    <slot></slot>
+  </div>
+</template>

package/nuxt-base-template/src/components/base/BaseModalContainer.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const { activeModal } = useModal();
+</script>
+
+<template>
+  <component :is="activeModal.component" v-if="activeModal" :context="activeModal" />
+</template>

package/nuxt-base-template/src/components/base/BaseNotification.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string;
+  text?: string;
+  duration: number;
+  type: 'success' | 'error' | 'warning' | 'info';
+}>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+}>();
+
+const process = ref(100);
+let durationLeft = props.duration - (500 + 130);
+onMounted(() => {
+  const interval = setInterval(() => {
+    durationLeft -= 30;
+    process.value = durationLeft / props.duration * 100;
+  }, 30);
+  setTimeout(() => {
+    clearInterval(interval);
+    emit('close');
+  }, props.duration);
+});
+
+const icon: Record<typeof props.type, string> = {
+  success: 'i-bi-check-circle',
+  error: 'i-bi-exclamation-circle',
+  warning: 'i-bi-exclamation-triangle',
+  info: 'i-bi-info-circle',
+};
+
+const accentColor: Record<typeof props.type, string> = {
+  success: '#059669',
+  error: '#DC2626',
+  warning: '#D97706',
+  info: '#3B82F6',
+};
+</script>
+
+<template>
+  <div
+    :style="`--accent-color: ${accentColor[props.type]}`"
+    class="pointer-events-auto relative  w-full max-w-sm overflow-hidden rounded-lg bg-white dark:bg-gray-950 shadow-lg ring-1 ring-black ring-opacity-5 z-[99999px]"
+  >
+    <div
+      :style="{
+        width: `${process}%`,
+      }" class="bg-[--accent-color] h-[5px] duration-100 transition-[width] w-[width] absolute bottom-0"
+    ></div>
+    <div class="p-4 ">
+      <div class="flex items-start">
+        <div class="flex-shrink-0">
+          <span :class="icon[props.type]" class=" h-6 w-6 text-[--accent-color]"></span>
+        </div>
+        <div class="ml-3 w-0 flex-1 pt-0.5">
+          <p class="text-sm font-semibold text-gray-900 dark:text-white">
+            {{ props.title }}
+          </p>
+          <p v-if="props.text" class="mt-1 text-sm text-gray-500 dark:text-white">
+            {{ props.text }}
+          </p>
+        </div>
+        <div class="ml-4 flex flex-shrink-0">
+          <button
+            type="button"
+            class="inline-flex rounded-md bg-white text-gray-400 dark:bg-gray-100 dark:text-white hover:text-gray-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+            @click="emit('close')"
+          >
+            <span class="sr-only">Close</span>
+            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path
+                d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/nuxt-base-template/src/components/base/BaseNotificationContainer.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const { notifications, remove } = useNotification();
+</script>
+
+<template>
+  <div aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-[99999]">
+    <TransitionGroup
+      tag="div" name="list" class="flex w-full flex-col items-center space-y-4 sm:items-end"
+    >
+      <BaseNotification v-for="notification in notifications" :key="notification.uuid" :text="notification.text" :title="notification.title" :type="notification.type" :duration="notification.duration!" @close="remove(notification.uuid)" />
+    </TransitionGroup>
+  </div>
+</template>
+
+<style>
+.list-move,
+  /* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.list-leave-active {
+  position: absolute;
+}
+</style>

package/nuxt-base-template/src/components/base/BaseProgressbar.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  percent: number | `${number}`;
+  duration?: number | `${number}`;
+  label?: string;
+  color?: 'primary' | 'red' | 'green' | 'blue';
+}>(), {
+  duration: 400,
+  color: 'primary',
+});
+
+type RecordFromUnion<T extends string> = {
+  [K in T]: string
+};
+
+type ColorTypes = 'text' | 'background' | 'background-light';
+
+const colorClass: Record<typeof props.color, RecordFromUnion<ColorTypes>> = {
+  'primary': {
+    'text': 'text-primary-600',
+    'background': 'bg-primary-500',
+    'background-light': 'bg-gray-200',
+  },
+  'red': {
+    'text': 'text-red-600',
+    'background': 'bg-red-500',
+    'background-light': 'bg-red-200',
+  },
+  'green': {
+    'text': 'text-green-600',
+    'background': 'bg-green-500',
+    'background-light': 'bg-green-200',
+  },
+  'blue': {
+    'text': 'text-blue-600',
+    'background': 'bg-blue-500',
+    'background-light': 'bg-blue-200',
+  },
+};
+</script>
+
+<template>
+  <div :style="`--percent: ${props.percent}%; --duration: ${props.duration}ms;`" class="relative pt-1 w-full">
+    <div v-if="props.label" class="flex mb-2 items-center justify-between">
+      <div>
+        <span
+          :class="[colorClass[props.color].text, colorClass[props.color]['background-light']]"
+          class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full"
+        >
+          {{ props.label }}
+        </span>
+      </div>
+      <div class="text-right">
+        <span :class="[colorClass[props.color].text]" class="text-xs font-semibold inline-block ">
+          {{ (+props.percent).toFixed(0) }}%
+        </span>
+      </div>
+    </div>
+    <div :class="colorClass[props.color]['background-light']" class="overflow-hidden h-1 mb-4 text-xs flex rounded bg-[--color-light]">
+      <div
+        :class="colorClass[props.color].background"
+        class="transform ease-in-out w-[--percent] duration-[--duration] shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center"
+      ></div>
+    </div>
+  </div>
+</template>

package/nuxt-base-template/src/components/base/BaseToggle.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  active?: boolean;
+}>(), {
+  active: false,
+});
+const toggleActive = ref(false);
+
+watch(() => props.active, () => {
+  toggleActive.value = props.active;
+}, { immediate: true });
+</script>
+
+<template>
+  <div class="flex justify-between items-center" @click="toggleActive = !toggleActive">
+    <div class="w-8 h-5 flex items-center bg-gray-300 rounded-full p-1 duration-300 ease-in-out" :class="{ 'bg-green-400': toggleActive }">
+      <div class="bg-white w-4 h-4 rounded-full shadow-md transform duration-300 ease-in-out" :class="{ 'translate-x-2': toggleActive }"></div>
+    </div>
+  </div>
+</template>