<template>
  <div class="flex justify-end mb-3">
    <div class="border border-C bg-A rounded-md w-full sm:w-64 relative items-center">
      <input v-model="searchText" type="text" placeholder="Cari ..."
        class="focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md w-full px-3 py-2 "
        @input="$emit('update:search', searchText)" />
      <div class="absolute right-3 top-1/2 -translate-y-1/2 text-C">
       <i class="fas fa-search"></i>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

const searchText = ref("");
defineEmits(["update:search"]);
</script>
