update

src/components/HowWorksSection.vue

@@ -1,71 +1,56 @@
 <template>
-<slide-template
-  title="how_it_works__title"
-  >
-  <q-tabs
-    v-model="tab"
-    dense
-    class="text-grey"
-    active-color="primary"
-    indicator-color="primary"
-    align="justify"
-    narrow-indicator
-    outside-arrows
-    mobile-arrows
+  <slide-template
+    title="how_it_works__title"
+    class="overflow-hidden w100"
     >
-    <q-tab
-      v-for="tab in tabs"
-      :key="tab.name"
-      :name="tab.name"
-      :label="$t(tab.label)"
-    />
-  </q-tabs>
-
-  <q-tab-panels
-    v-model="tab"
-    animated
-    class="w60 bg-transparent"
-    >
-    <q-tab-panel
-      v-for="tab in tabs"
-      :key="tab.name"
-      :name="tab.name"
+    <custom-tabs
+      v-bind="$attrs"
+      :tabItems
+      :useTabsNoCaps
       >
-      <div
-        class="relative-position w100">
-      <div
-        class="abolute-position w100"
-        style="height: 60vh;"
-        >
-        <iframe 
-          src="https://kinescope.io/embed/5yesvjfi6XAYRuxzbsYGHZ" 
-          allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock; fullscreen;" frameborder="0" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
-          >
-        </iframe>
-      </div>
-      </div>
-        
-      <!-- <q-skeleton
-        style="height: calc(100vw * 0.5 / 16 * 9)"
-        square
-      /> -->
-    </q-tab-panel>
-  </q-tab-panels>
-</slide-template>
-
+      <template #default="{ item }">
+        <div class="relative-position w60 q-pt-md">
+          <div style="height: 60vh; position: relative;">
+            <iframe
+              :key="item.name"
+              :src="item.url" 
+              allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock; fullscreen;" 
+              frameborder="0" 
+              style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
+            />
+          </div>
+        </div>
+      </template>
+    </custom-tabs>
+  </slide-template>
 </template>
 
-<script setup lang="ts">
-  import { ref } from 'vue'
+<script setup>
   import SlideTemplate from 'components/SlideTemplate.vue'
-  const tabs = [
-    { name: 'intro', label: 'how_it_works__intro'},
-    { name: 'admin', label: 'how_it_works__admin'},
-    { name: 'user', label: 'how_it_works__user'}
+  import CustomTabs from 'components/CustomTabs.vue'
+
+  defineProps({
+    useTabsNoCaps: Boolean
+  })
+
+  const tabItems = [
+    {
+      name: 'intro',
+      label: 'how_it_works__intro',
+      url: 'https://kinescope.io/embed/5yesvjfi6XAYRuxzbsYGHZ'
+    },
+    {
+      name: 'admin',
+      label: 'how_it_works__admin',
+      url: 'https://kinescope.io/embed/5yesvjfi6XAYRuxzbsYGHZ'
+    },
+    {
+      name: 'user',
+      label: 'how_it_works__user',
+      url: 'https://kinescope.io/embed/5yesvjfi6XAYRuxzbsYGHZ'
+    }
   ]
-  const tab = ref(tabs[0].name)
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
 </style>