pagination/filter product api

app/product/[slug]/page.tsx

@@ -9,9 +9,7 @@ interface PageProps {
 }
 
 export default async function SingleProductPage({ params }: PageProps) {
-  // --------------------------------------------------------
-  // ۱. منطق دریافت داده‌ها (دقیقا مشابه درخواست شما)
-  // --------------------------------------------------------
+
   const resolvedParams = await params; 
   const slug = resolvedParams.slug;
 
@@ -28,10 +26,7 @@ export default async function SingleProductPage({ params }: PageProps) {
     return notFound();
   }
 
-  // --------------------------------------------------------
-  // ۲. آماده‌سازی و مپ کردن داده‌های API برای UI
-  // --------------------------------------------------------
-  
+
   // فرمت کردن قیمت
   const formattedPrice = product.display_price
     ? product.display_price.toLocaleString('fa-IR')
@@ -49,12 +44,10 @@ export default async function SingleProductPage({ params }: PageProps) {
     return attr ? attr.valueText : "-";
   };
 
-  // --------------------------------------------------------
-  // ۳. خروجی UI (بدون تغییر در ساختار و استایل‌ها)
-  // --------------------------------------------------------
+
   return (
     <div className="bg-[#f8f9fc] min-h-screen py-8" dir="rtl">
-      <div className="mx-auto px-4 lg:px-8 container max-w-7xl">
+      <div className="mx-auto px-4 lg:px-8 container max-w-6xl">
         <ScrollToTop />
 
         {/* مسیر راهنما */}

app/products/page.tsx

@@ -1,31 +1,28 @@
 // app/products/page.tsx
-import ProductCard from '@/components/productcard';
 import { getProducts } from '@/public/src/services/products/api';
+import ProductGrid from '@/components/clientProduct';
 
 export default async function ProductsPage() {
-  const data = await getProducts(1, 20);
+  // گرفتن تمام محصولات در سرور (چون بک‌اند شما لیمیت را نادیده می‌گیرد، همه را دریافت می‌کنیم)
+  const data = await getProducts(1, 100); 
 
-  const products = data.items.map((p: any) => ({
+  const products = data.items?.map((p: any) => ({
     id: p.id,
     title: p.title,
     brand: p.brand,
     price: p.calculated_price,
     stock: p.stock,
     slug: p.slug,
-    image: p.mainImageUrl || "/placeholder.png",
+    image: p.mainImageUrl || "/src/img/1.jpg",
     attributes: p.attributes
-  }));
+  })) || [];
 
   return (
-    <div className="container mx-auto px-4 max-w-6xl">
+    <div className="container mx-auto px-4 max-w-6xl py-8">
       <h1 className="text-2xl font-bold mb-6">همه محصولات</h1>
 
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-        {products.map((product: any) => (
-          <ProductCard key={product.id} product={product} />
-        ))}
-      </div>
+      {/* پاس دادن کل محصولات به کامپوننت کلاینت */}
+      <ProductGrid products={products} />
     </div>
   );
 }