connected cart to api

frontend/pages/cart/index.vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+// imports
+
+import useGetOrdersCart from "~/composables/api/orders/useGetOrdersCart";
+
+// meta
+
 definePageMeta({
     layout: "cart",
     middleware: "check-is-logged-in",
@@ -6,11 +12,48 @@ definePageMeta({
     prevPage: { name: "index", label: "بازگشت به خانه" },
     nextPage: { name: "cart-delivery", label: "انتخاب آدرس" },
 });
+
+// queries
+
+const { data: cart, isLoading: cartIsLoading } = useGetOrdersCart();
 </script>
 
 <template>
-    <div class="flex flex-col w-full gap-4 lg:gap-6">
-        <CartItem v-for="i in 3" />
+    <div class="w-full flex flex-col gap-4 lg:gap-6">
+        <div
+            class="flex items-center justify-between w-full gap-3 px-5 py-4 rounded-xl bg-slate-50 border border-slate-200"
+        >
+            <div class="flex items-center w-full gap-3 lg:w-1/2">
+                <p class="font-semibold lg:text-lg text-black">
+                    {{ cart?.items.length }} مرسوله
+                </p>
+            </div>
+            <DeleteCartAllModal />
+        </div>
+
+        <ul v-if="cartIsLoading" class="w-full flex flex-col gap-4 lg:gap-6">
+            <Skeleton
+                v-for="i in 4"
+                :key="i"
+                class="w-full !h-[12rem] !rounded-xl"
+            />
+        </ul>
+
+        <div v-else class="w-full h-max">
+            <div v-if="!cart?.items.length" class="flex flex-grow w-full">
+                <Placeholder
+                    title="محصولی در سبد خرید یافت نشد :("
+                    icon="bi:cart"
+                />
+            </div>
+            <ul v-else class="w-full flex flex-col gap-4 lg:gap-6">
+                <CartItem
+                    v-for="(item, index) in cart?.items"
+                    :key="index"
+                    :data="item"
+                />
+            </ul>
+        </div>
     </div>
 </template>