Moisés de Jesús Cortés Castellanos 28c5ba153b
UPDATE: Actualización de dependencias mayor (#6)
- TailwindCSS 3 => 4
- Diseño cuadrado
- Otras dependencias.
2025-03-04 23:20:48 -06:00

34 lines
927 B
Vue

<script setup>
import { RouterLink } from 'vue-router';
import GoogleIcon from '@Shared/GoogleIcon.vue';
/** Propiedades */
defineProps({
icon: String,
title: String,
to: String,
value: Number
});
</script>
<template>
<RouterLink
class="relative flex-1 flex flex-col gap-2 p-4 rounded-sm -md bg-gray-200 dark:bg-transparent dark:border"
:to="to"
>
<label class="text-base font-semibold tracking-wider">
{{ title }}
</label>
<label class="text-primary dark:text-primary-dt text-4xl font-bold">
{{ value }}
</label>
<div class="absolute bg-primary dark:bg-primary-d rounded-md font-semibold text-xs text-gray-100 p-2 right-4 bottom-4">
<GoogleIcon
class="text-3xl md:text-2xl lg:text-3xl"
:name="icon"
filled
/>
</div>
</RouterLink>
</template>