<template>
    <div v-if="visible" class="inline-flex items-center bg-gray-200 text-gray-700 px-4 py-2">
      <button @click="closeTag" class="mr-4">
        <font-awesome-icon icon="times" class="text-gray-700" />
      </button>
      <span>{{ text }}</span>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
  
  const props = defineProps({
    text: {
      type: String,
      required: true
    }
  });
  
  const visible = ref(true);
  
  function closeTag() {
    visible.value = false;
  }
  </script>