added product grid

frontend/pages/products.vue

@@ -105,34 +105,32 @@ watch(
         </div>
         <ul
             v-if="productsIsLoading"
-            class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[1.5rem]"
+            class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-8 gap-5 sm:gap-8 w-full"
         >
-            <Skeleton
-                v-for="i in 9"
-                :key="i"
-                class="w-full !h-[25rem] lg:!h-[22.5rem] !rounded-2xl"
-            />
+            <div class="w-full flex flex-col gap-3" v-for="i in 8" :key="i">
+                <Skeleton
+                    v-for="i in 3"
+                    :key="i"
+                    class="w-full"
+                    :class="{
+                        '!h-[11.75rem] lg:!h-[22.5rem] !rounded-2xl': i == 1,
+                        '!h-[1.35rem] lg:!h-[1.5rem] !rounded-sm lg:!hidden': [
+                            2, 3,
+                        ].includes(i),
+                        '!w-1/2': i == 2,
+                    }"
+                />
+            </div>
         </ul>
         <div v-else class="w-full h-max">
             <div v-if="!products?.length" class="flex flex-grow w-full">
                 <Placeholder title="محصولی یافت نشد :(" icon="bi:search" />
             </div>
-            <ul
-                v-else
-                class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[1.5rem]"
-            >
-                <li v-for="(product, index) in products" :key="index">
-                    <ProductCard
-                        :id="product.id"
-                        :title="product.name"
-                        :picture="product.variants[0].images[0].image"
-                        :colors="product.colors"
-                        :price="product.variants[0].price"
-                        :rate="product.rating"
-                        :dark-layer="true"
-                    />
-                </li>
-            </ul>
+            <ProductsGrid
+                :with-header="false"
+                :products="products"
+                class="!p-0"
+            />
             <div v-if="data?.count > 10" class="w-full flex-center py-10">
                 <Pagination :items="paginationData" :total="data?.count" />
             </div>