Merge pull request #2 from FerneLabs/fix/home-view-transitions

rollback transitions to native comps

src/components/Navbar.vue

@@ -32,7 +32,14 @@ const setOpen = (state: boolean) => {
         games
       </p>
 
-      <TransitionGeneric type="opacityFromMin" duration="300">
+      <transition
+        enter-active-class="transition-opacity duration-300"
+        leave-active-class="transition-opacity duration-300"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
         <div
           v-show="gamesOpen"
           class="absolute top-20 right-20 bg-white shadow-lg rounded p-4 flex flex-col bg-background w-[50vw] md:w-fit"
@@ -49,7 +56,7 @@ const setOpen = (state: boolean) => {
             {{ game.name }}
           </RouterLink>
         </div>
-      </TransitionGeneric>
+      </transition>
 
       <RouterLink to="/#about"> about </RouterLink>
     </div>

src/components/PartnerCard.vue

@@ -25,7 +25,14 @@ const { name, redirectUrl, height = '200', width = '200' } = defineProps<Props>(
 <template>
   <div @mouseenter="setHover(true)" @mouseleave="setHover(false)" class="relative my-2">
     <img :src="getImgUrl(name)" :alt="`${name} logo`" :height="height" :width="width" />
-    <TransitionGeneric type="opacityFromMin" duration="300">
+    <transition
+        enter-active-class="transition-opacity duration-300"
+        leave-active-class="transition-opacity duration-300"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
       <div
         v-show="hover"
         class="absolute top-0 flex flex-col justify-center items-center w-full bg-backdrop90 h-full"
@@ -39,6 +46,6 @@ const { name, redirectUrl, height = '200', width = '200' } = defineProps<Props>(
           >see more</a
         >
       </div>
-    </TransitionGeneric>
+    </transition>
   </div>
 </template>

src/components/icons/GitHub-icon.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
-
 interface Props {
   width?: string
   height?: string

src/components/icons/LinkedIn-icon.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
-
 interface Props {
   width?: string
   height?: string

src/components/icons/Telegram-icon.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
-
 interface Props {
   width?: string
   height?: string

src/components/icons/X-icon.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
-
 interface Props {
   width?: string
   height?: string

src/components/transitions/Opacity-min-max.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
-
 interface Props {
   duration: string
   min: string

tsconfig.app.json

@@ -8,6 +8,8 @@
 
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "resolveJsonModule": true,
+    "esModuleInterop": true
   }
 }