feat: add product generation and pagination components

- Implemented product generation for categories with a helper function to create 50 products per category.
- Added image assets for English and Persian language support.
- Created a reusable Pagination component for navigating through product lists.
- Developed ProductList component to display products with pagination support.
- Defined TypeScript interfaces for product list props and API response structure.

src/app/[locale]/layout.tsx

@@ -2,13 +2,10 @@ import Footer from '@/components/layout/footer/Footer';
 import '@/app/globals.css';
 import 'leaflet/dist/leaflet.css';
 import { notFound } from 'next/navigation';
+// import { cookies } from 'next/headers';
 import { NextIntlClientProvider } from 'next-intl';
 import type { ILayoutLocaleParams } from '@/models/layout.d';
-
-// export const metadata: Metadata = {
-//   title: 'Create Next App',
-//   description: 'Generated by create next app',
-// };
+import { cookies } from 'next/headers';
 
 export default async function RootLayout({
   children,
@@ -17,7 +14,12 @@ export default async function RootLayout({
   children: React.ReactNode;
   params: ILayoutLocaleParams;
 }>) {
-  const locale = params.locale;
+  const paramsData = await params;
+  const locale = paramsData.locale;
+  // const cookieStore = await cookies();
+
+  // // Set locale cookie on the server
+  // cookieStore.set('locale', locale, { path: '/', httpOnly: false });
 
   const fontClass = locale === 'fa' ? 'font-fa' : 'font-en';
 

src/app/[locale]/product-categories/[product_category_id]/page.tsx

@@ -3,8 +3,10 @@ import images from '@/assets/images/images';
 import Breadcrumb from '@/components/layout/breadcrumb';
 import { IBreadcrumbItem } from '@/components/layout/breadcrumb/breadcrumb';
 import InnerPageBanner from '@/components/layout/innerPages/banner';
+import Pagination from '@/components/layout/pagination';
 import ProductCategoryCardInProducts from '@/components/pages/productCategories/ProductCategoryCardInProducts';
 import ProductCard from '@/components/pages/products/ProductCard';
+import ProductList from '@/components/pages/products/productList';
 import { ILayoutLocaleParams } from '@/models/layout';
 import { getProductCategoryById, getProducts } from '@/services/products';
 import { getTranslations } from 'next-intl/server';
@@ -33,6 +35,8 @@ export default async function ProductPage({
     { title: productCategory.title },
   ] as IBreadcrumbItem[];
 
+  const refetch = () => {};
+
   return (
     <main className="">
       <InnerPageBanner
@@ -49,11 +53,11 @@ export default async function ProductPage({
           <h2 className="mb-6 text-3xl font-semibold text-gray-500">
             {productCategory.title} Products
           </h2>
-          <div className="grid gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
-            {products.map((product, index) => (
-              <ProductCard {...product} key={index} />
-            ))}
-          </div>
+          <ProductList
+            initialProducts={products.data}
+            initialPagination={products.pagination}
+            categoryId={productCategoryId}
+          />
         </div>
       </div>
     </main>