Spiel erweitert

frontend/src/components/SimpleTabs.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="simple-tabs">
+      <button
+        v-for="tab in tabs"
+        :key="tab.value"
+        :class="['simple-tab', { active: internalValue === tab.value }]"
+        @click="$emit('update:modelValue', tab.value)"
+      >
+        <slot name="label" :tab="tab">
+          {{ $t(tab.label) }}
+        </slot>
+      </button>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'SimpleTabs',
+    props: {
+      tabs: {
+        type: Array,
+        required: true,
+      },
+      modelValue: {
+        type: [String, Number],
+        required: true,
+      },
+    },
+    computed: {
+      internalValue() {
+        return this.modelValue;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .simple-tabs {
+    display: flex;
+    margin-top: 1rem;
+  }
+  
+  .simple-tab {
+    padding: 0.5rem 1rem;
+    background: #fff;
+    border: none;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+  
+  .simple-tab.active {
+    background: #F9A22C;
+    color: #000;
+  }
+  </style>
+