<template>
  <div class="bg-white cursor-default shadow-sm text-center h-56 p-8 hover:shadow-2xl">
    <svg-icon :iconClass="props.data.icon" class="w-14 h-14 mx-auto" />
    <div class="text-lg font-semibold text-gray-800 pt-4">{{ props.data.title }}</div>
    <div class="text-xs text-gray-400 pt-4 text-left">{{ props.data.detail }}</div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, defineProps } from "vue"
interface item {
  id: number,
  title: string,
  detail: string,
  icon: string
}
const props = withDefaults(defineProps<{
  data: item
}>(), {

})
</script>