checkout accessibility/category products

app/category/[categoryName]/page.tsx

@@ -1,40 +1,61 @@
+import ProductCard from "@/components/productcard"; // 1. ایمپورت کردن کامپوننت کارت محصول
 import { getProductsByCategory } from "@/public/src/services/products/api";
+import { Product } from "@/public/src/types/product"; // بهتر است تایپ محصول را هم برای خوانایی ایمپورت کنید
 
-export default async function CategoryPage({ params }:any) {
-
+export default async function CategoryPage({ params }: any) {
   const { categoryName } = await params;
 
-  console.log("🔎 CategoryPage slug:", categoryName);
+  // منطق دریافت دیتا از API بدون تغییر باقی می‌ماند
+  const categoryData = await getProductsByCategory(categoryName);
 
-  const products = await getProductsByCategory(categoryName);
+  // مدیریت حالتی که محصولی یافت نشود
+  if (!categoryData || !categoryData.items || categoryData.items.length === 0) {
+    return (
+      <div className="container mx-auto py-20 text-center">
+        <h1 className="text-2xl font-bold text-gray-800">
+          محصولی در دسته‌بندی «{decodeURIComponent(categoryName)}» یافت نشد.
+        </h1>
+      </div>
+    );
+  }
+
+  const pageTitle = categoryData.items[0]?.primaryCategory?.name || decodeURIComponent(categoryName);
 
   return (
-    <div className="p-8">
-
-      <h1 className="text-xl font-bold mb-6">
-        دسته‌بندی: {categoryName}
-      </h1>
-
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
-
-        {products.items.map((product:any) => (
-          <div key={product.id} className="border p-4 rounded-xl">
-
-            <div className="h-32 bg-gray-100 rounded mb-3" />
-
-            <h3 className="text-sm font-medium">
-              {product.title}
-            </h3>
-
-            <p className="text-xs text-gray-500">
-              {product.brand}
-            </p>
-
+    <main className="bg-gray-50 min-h-screen py-10">
+      <div className="max-w-7xl mx-auto px-4">
+        {/* عنوان و تعداد محصولات */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-gray-800 flex items-center gap-2">
+            {pageTitle}
+            <span className="text-sm font-normal text-gray-500 bg-gray-200 px-3 py-1 rounded-full">
+              {categoryData.meta.total} کالا
+            </span>
+          </h1>
+          <div className="relative mt-3 h-[2px] bg-gray-200 w-full">
+            <div className="absolute right-0 top-0 h-[2px] w-24 bg-yellow-500"></div>
           </div>
-        ))}
+        </div>
 
+        {/* 2. جایگزینی div ساده با کامپوننت ProductCard در حلقه */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+          {categoryData.items.map((apiProduct: any) => {
+            // 3. تبدیل داده‌های API به فرمت مورد انتظار کامپوننت ProductCard
+            const productForCard: Product = {
+              id: apiProduct.id,
+              title: apiProduct.title,
+              brand: apiProduct.brand,
+              slug: apiProduct.slug,
+              price: apiProduct.calculated_price, // تبدیل نام فیلد
+              stock: apiProduct.stock,
+              image: apiProduct.mainImageUrl || "/placeholder.png", // تبدیل نام فیلد و افزودن جایگزین
+              attributes: apiProduct.attributes,
+            };
+
+            return <ProductCard key={productForCard.id} product={productForCard} />;
+          })}
+        </div>
       </div>
-
-    </div>
+    </main>
   );
 }