Add product/single product api

app/category/[categoryName]/page.tsx

@@ -1,91 +1,40 @@
-import { products } from "@/lib/data";
-import ProductCard from "@/components/productcard";
+import { getProductsByCategory } from "@/public/src/services/products/api";
 
-interface PageProps {
-  params: Promise<{ categoryName: string }>;
-}
+export default async function CategoryPage({ params }:any) {
 
-export default async function CategoryPage({ params }: PageProps) {
-  try {
-    // ۱. دریافت پارامترها
-    const resolvedParams = await params;
-    const rawCategoryName = resolvedParams.categoryName;
-    
-    
-    // ۲. دیکد کردن آدرس
-    const decodedUrl = decodeURIComponent(rawCategoryName);
+  const { categoryName } = await params;
 
-    // ۳. آماده‌سازی رشته برای مقایسه
-    const categoryNameToMatch = decodedUrl.replace(/-/g, " ").trim();
+  console.log("🔎 CategoryPage slug:", categoryName);
 
-    // استخراج تمام دسته‌بندی‌های موجود در دیتابیس (برای بررسی چشمی)
-    const allCategoriesInDb = Array.from(new Set(products.map(p => p.category)));
+  const products = await getProductsByCategory(categoryName);
 
-    // ۴. فیلتر کردن (با حذف فاصله‌های اضافی از دو طرف برای اطمینان)
-    const filteredProducts = products.filter(
-      (p) => p.category.trim() === categoryNameToMatch
-    );
+  return (
+    <div className="p-8">
 
-    // ۵. اگر پیدا نشد، صفحه دیباگ را در مرورگر نمایش بده
-    if (!filteredProducts || filteredProducts.length === 0) {
-      return (
-        <main className="container mx-auto px-4 py-10" dir="rtl">
-          <div className="bg-red-50 border border-red-200 text-red-800 p-6 rounded-lg">
-            <h1 className="text-2xl font-bold mb-4">محصولی پیدا نشد (حالت دیباگ)</h1>
-            
-            <div className="mb-6 space-y-2">
-              <p>پارامتر دریافت شده از URL: <strong className="font-mono bg-white px-2 py-1 rounded">{rawCategoryName}</strong></p>
-              <p>رشته‌ی آماده شده برای جستجو: <strong className="font-mono bg-white px-2 py-1 rounded">{categoryNameToMatch}</strong> (طول: {categoryNameToMatch.length} کاراکتر)</p>
-            </div>
+      <h1 className="text-xl font-bold mb-6">
+        دسته‌بندی: {categoryName}
+      </h1>
 
-            <h2 className="text-xl font-bold mb-2">لیست دسته‌بندی‌های موجود در دیتابیس شما:</h2>
-            <ul className="list-disc list-inside space-y-1 bg-white p-4 rounded-md">
-              {allCategoriesInDb.map((cat, index) => (
-                <li key={index} className="font-mono">
-                  "{cat}" (طول: {cat.length} کاراکتر)
-                </li>
-              ))}
-            </ul>
-            
-            <p className="mt-4 text-sm text-gray-600">
-              لطفا طول کاراکترها و املای کلمات را در لیست بالا مقایسه کنید. (آیا نیم‌فاصله یا فاصله اضافه وجود دارد؟)
-              <br />
-              <strong>نکته مهم:</strong> برای دیدن لاگ‌های بیشتر، ترمینال (کنسول) محیط توسعه (مثلاً VSCode) را چک کنید، نه کنسول مرورگر را.
+      <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>
+
           </div>
-        </main>
-      );
-    }
+        ))}
 
-    const categoryTitle = filteredProducts[0].category;
-
-    // رندر حالت موفق
-    return (
-      <main className="container mx-auto px-4 py-10" dir="rtl">
-        <div className="mb-8 border-b pb-4">
-          <h1 className="text-2xl font-bold text-gray-800">
-            دسته‌بندی: {categoryTitle}
-          </h1>
-          <p className="text-gray-500 mt-2">
-            تعداد محصولات یافت شده: {filteredProducts.length} مورد
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-          {filteredProducts.map((product) => (
-            <ProductCard key={product.id} product={product} />
-          ))}
-        </div>
-      </main>
-    );
-
-  } catch (error) {
-    // هندلینگ خطاهای غیرمنتظره
-    console.error("Critical Error in Category Page:", error);
-    return (
-      <div className="p-10 text-center text-red-500 font-bold">
-        خطای پردازشی رخ داد. لطفا ترمینال VSCode را بررسی کنید.
       </div>
-    );
-  }
+
+    </div>
+  );
 }