37 lines
1.2 KiB
Vue
37 lines
1.2 KiB
Vue
<script setup>
|
|
import { Link } from '@inertiajs/inertia-vue3'
|
|
import PetBoldSvg from '../../components/svg/petBold.svg'
|
|
import { convertEnglishToPersian } from '../../utils/numberUtils'
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
count: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
labelLink: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
link: {
|
|
type: String,
|
|
required: false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-white px-4 h-20 border-[1px] border-complement-50 items-center justify-center rounded-xl grid grid-cols-[auto_1fr] gap-2">
|
|
<div class="w-14 h-14 bg-danger-100 rounded-md flex items-center justify-center">
|
|
<PetBoldSvg/>
|
|
</div>
|
|
<div class="text-complement-700 text-center grid grid-cols-1 gap-2 text-sm font-normal">
|
|
<p class="font-semibold text-[11px]"><span class="font-bold text-[13px]">{{ convertEnglishToPersian(count) }}</span> {{ title }}</p>
|
|
<Link v-if="link" :href="link" class="text-complement-700 bg-complement-50 text-center px-2 py-2 rounded-md text-[11px] font-semibold"> {{ labelLink }} </Link>
|
|
</div>
|
|
</div>
|
|
</template>
|