<script setup lang="ts">
import {defineComponent, ref} from 'vue'
const selected = ref('A')

let options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])
</script>

<template>
  <select v-model="selected" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-2/3" >
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>

  <input
      id="textInput1"
      class="text-input px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-1/3"
      type="text"
      placeholder="Name"
  />
  <input
      id="textInput2"
      class="text-input px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-1/3"
      type="text"
      placeholder="Value"
  />
  <button class="tool-button" @click="clear">Add Variable</button>
</template>

