connected minimal cart item to api

frontend/components/cart/global/MinimalCartItem.vue

@@ -1,16 +1,42 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// imports
+
+import { useImage } from "@vueuse/core";
+
+// types
+
+type Props = {
+    image: string;
+    title: string;
+};
+
+// props
+
+const props = defineProps<Props>();
+
+const { image } = toRefs(props);
+
+const { isLoading: cartImageIsLoading } = useImage({
+    src: image.value,
+});
+</script>
 
 <template>
     <div class="flex items-center w-full gap-4">
         <div
+            v-if="!cartImageIsLoading"
             class="size-[3.5rem] shrink-0 rounded-100 border border-gray-300 overflow-hidden"
         >
-            <img src="/img/product-1.jpg" alt="product" class="object-conver" />
+            <img :src="image" alt="product" class="object-conver" />
         </div>
+        <Skeleton
+            v-else
+            class="!size-[3.5rem] aspect-square shrink-0 !rounded-100 border border-slate-200"
+        />
         <span
             class="text-xs font-semibold lg:text-sm text-gray-800 line-clamp-2"
         >
-            فشارسنج بازویی امرن Omron M3
+            {{ title }}
         </span>
     </div>
 </template>