Updated

frontend/pages/products.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+
 // import
 
 import useGetProducts, {
@@ -65,15 +66,26 @@ watch(
                     <span>/</span>
                     <span>همه</span>
                 </div> -->
-                <h1 class="typo-h-3">همه محصولات</h1>
+                <h1 class="typo-h-3">لیست محصولات</h1>
             </div>
 
             <div class="w-full flex items-center justify-end gap-4">
                 <Input
                     placeholder="جست و جو محصول ..."
                     v-model="search"
-                    class="bg-slate-50 !border-slate-200 hover:border-slate-300 focus:!border-slate-800 !rounded-full w-8/12"
-                />
+                    variant="outlined"
+                    class="rounded-full w-8/12"
+                >
+                    <template #endItem>
+                        <div class="flex items-center gap-1">
+                            <Icon
+                                class="translate-y-[-1px]"
+                                name="ci:search"
+                                size="24"
+                            />
+                        </div>
+                    </template>
+                </Input>
                 <FilterButton />
             </div>
         </div>
@@ -101,17 +113,18 @@ watch(
             <ul v-else class="w-full grid grid-cols-3 gap-[1.5rem]">
                 <li v-for="(product, index) in products" :key="index">
                     <ProductCard
-                        brand="Samsung"
+                        :id="product.id"
+                        brand="برند محصول"
                         :title="product.name"
-                        picture="/assets/img/product-1.jpg"
-                        :colors="['#0000ff', '#00ff00', 'red']"
+                        :picture="product.image1"
+                        :colors="['white', 'black']"
                         :price="product.price"
                         :rate="product.rating"
-                        tag="New"
+                        :dark-layer="true"
                     />
                 </li>
             </ul>
-            <div class="w-full flex-center py-10">
+            <div v-if="products!.length > 10" class="w-full flex-center py-10">
                 <Pagination :items="paginationData" :total="data?.count" />
             </div>
         </div>