feat: build UI

app/components/dashboard/TopProducts.vue

@@ -0,0 +1,48 @@
+<script setup>
+import TopProduct from '@/components/dashboard/TopProduct.vue';
+
+const products = [
+  {
+    name: 'Gạo ST25 - Bao 5kg',
+    sold_count: 1250,
+    revenue: 156000000
+  },
+  {
+    name: 'Nước mắm Phú Quốc - Chai 500ml',
+    sold_count: 980,
+    revenue: 132000000
+  },
+  {
+    name: 'Đường tinh luyện - Bao 1kg',
+    sold_count: 856,
+    revenue: 98000000
+  },
+  {
+    name: 'Dầu ăn Neptune - Chai 1L',
+    sold_count: 742,
+    revenue: 87000000
+  },
+  {
+    name: 'Bột mì đa dụng - Bao 1kg',
+    sold_count: 623,
+    revenue: 72000000
+  },
+]
+</script>
+<template>
+  <div class="card">
+    <div class="card-content">
+      <p class="fs-17 font-semibold mb-4">Top sản phẩm</p>
+      <div class="is-flex is-flex-direction-column is-gap-2">
+        <TopProduct
+          v-for="product in products" 
+          :key="product.name"
+          v-bind="{
+            ...product,
+            topRevenue: products[0].revenue
+          }"
+        />
+      </div>
+    </div>
+  </div>
+</template>