bravio init project

components/SelectMenu.vue

@@ -0,0 +1,42 @@
+<template>
+   <div class="space-y-2">
+  <label for="select" class="block text-sm text-gray-900">{{ label }} <span>{{ required ? '*' : '' }}</span></label>
+    <select 
+      id="select" 
+      v-model="selectedOption"
+      name="select"
+      class="block outline-1 -outline-offset-1 outline-gray-300 w-full rounded-md border-0 bg-white p-2 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-600"
+      @change="updateSelection">
+      <option disabled value="">Seleccione una opción</option>
+      <option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: 'Select Menu'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    options: { type: Array, default: () => [] }
+  },
+  emits: ['input-value'],
+  data() {
+    return {
+      selectedOption: null
+    }
+  },
+  methods: {
+    updateSelection(event) {
+      this.selectedOption = event.target.value
+      this.$emit('input-value', this.selectedOption)
+    }
+  }
+}
+</script>