Simple Database + Endpoints

GUI/src/routes/Home.vue

@@ -2,9 +2,13 @@
 import CarouselItemWithTitle from '@/components/CarouselItemWithTitle.vue';
 import HomeEntrie from '@/components/HomeEntrie.vue';
 import HomeEntrieWithImagePreset from '@/components/HomeEntrieWithImagePreset.vue';
-import { ref } from 'vue';
+import ResponsiveTabsOrList from '@/components/ResponsiveTabsOrList.vue';
 
-const tab = ref("1");
+const tabItems = [
+  { value: '1', label: 'Nikolausturnier' },
+  { value: '2', label: 'Wettkämpfe' },
+  { value: '3', label: 'Kinoabende' },
+];
 </script>
 
 <template>
@@ -90,16 +94,9 @@ const tab = ref("1");
         </home-entrie>
 
         <home-entrie title="Und sonst so?"></home-entrie>
-        <v-tabs color="#b62b2b" v-model="tab" :show-arrows="$vuetify.display.mobile">
-          <v-tab value="1">Nikolausturnier</v-tab>
-          <v-tab value="2">Wettkämpfe</v-tab>
-          <v-tab value="3">Kinoabende</v-tab>
-        </v-tabs>
 
-        <v-divider></v-divider>
-
-        <v-tabs-window v-model="tab">
-          <v-tabs-window-item value="1">
+        <responsive-tabs-or-list :items="tabItems">
+          <template #1>
             <home-entrie-with-image-preset
               title="Nikolausturnier"
               image="/static/images/nikolausturnier/total.png"
@@ -110,8 +107,9 @@ const tab = ref("1");
                 gemeinsam Spaß zu haben.
               </template>
             </home-entrie-with-image-preset>
-          </v-tabs-window-item>
-          <v-tabs-window-item value="2">
+          </template>
+
+          <template #2>
             <home-entrie-with-image-preset
               title="Wettkämpfe"
               image="/static/images/wettkampf/total.jpg"
@@ -122,8 +120,9 @@ const tab = ref("1");
                 nationalen Meisterschaften.
               </template>
             </home-entrie-with-image-preset>
-          </v-tabs-window-item>
-          <v-tabs-window-item value="3">
+          </template>
+
+          <template #3>
             <home-entrie-with-image-preset
               title="Kinoabende"
               image="/static/images/kinoabend/total.jpg"
@@ -134,8 +133,8 @@ const tab = ref("1");
                 entspannen, Snacks teilen und über Filme und Sport plaudern.
               </template>
             </home-entrie-with-image-preset>
-          </v-tabs-window-item>
-        </v-tabs-window>
+          </template>
+        </responsive-tabs-or-list>
       </v-container>
     </main>
   </v-container>