<template>
  <div class="flex items-center justify-center w-full h-full">
    <Alert class="max-w-[300px] rounded-md text-md">
      <CircleSlash2 />
      <AlertTitle>No data to display</AlertTitle>
      <AlertDescription>
        <div class="flex-col">
          <div>Either the value is empty or the data has been filtered out</div>
        </div>
      </AlertDescription>
    </Alert>
  </div>
</template>
<script setup lang="ts">
import { CircleSlash2 } from 'lucide-vue-next'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
</script>
