58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
required: false,
|
|
},
|
|
icon: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
changeValue: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
value: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
|
|
<dt>
|
|
<div class="absolute rounded-md bg-green-500 p-3">
|
|
<Icon class="text-white" size="24" :name="icon" />
|
|
</div>
|
|
<p class="ml-16 truncate text-sm font-medium text-gray-500">
|
|
{{ title }}
|
|
</p>
|
|
</dt>
|
|
<dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
|
|
<p class="text-2xl font-semibold text-gray-900">
|
|
{{ value }} KG
|
|
</p>
|
|
<p class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
|
|
<svg class="h-5 w-5 flex-shrink-0 self-center text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span class="sr-only"> Increased by </span>
|
|
{{ changeValue }} KG
|
|
</p>
|
|
<div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
|
|
<div class="text-sm">
|
|
<NuxtLink to="#" class="font-medium text-green-600 hover:text-green-500">
|
|
View Data
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|