CardProductFavorite.vue 1.1KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <script setup>
  2. defineProps({
  3. products: {
  4. required: true,
  5. type: Array,
  6. },
  7. })
  8. </script>
  9. <template>
  10. <div class="card">
  11. <div class="flex justify-content-between align-items-center">
  12. <h5>Produk Terlaris</h5>
  13. </div>
  14. <ul class="list-none p-0 m-0">
  15. <li
  16. v-for="product in products"
  17. class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
  18. >
  19. <span class="text-900 font-medium mr-2 mb-1 md:mb-0">{{
  20. product.title
  21. }}</span>
  22. <div class="mt-2 md:mt-0 flex flex-column align-items-end">
  23. <div class="mt-1 text-600 text-xs">Profit</div>
  24. <div
  25. class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
  26. style="height: 8px"
  27. >
  28. <div
  29. class="bg-orange-500 h-full"
  30. :style="{ width: `${product.profit}% ` }"
  31. ></div>
  32. </div>
  33. <span class="text-orange-500 ml-3 font-medium"
  34. >%{{ product.profit }}</span
  35. >
  36. </div>
  37. </li>
  38. </ul>
  39. </div>
  40. </template>