Add nuxt-icon package and CardButton component

components/CardButton.vue

@@ -0,0 +1,57 @@
+<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>