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/components/pages/products/productList/index.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useState } from 'react';
+import ProductCard from '../ProductCard';
+import Pagination from '@/components/layout/pagination';
+import { getProducts } from '@/services/products';
+import { IProductListProps } from './productList';
+
+export default function ProductList({
+  initialProducts,
+  initialPagination,
+  categoryId,
+}: IProductListProps) {
+  const [products, setProducts] = useState(initialProducts);
+  const [pagination, setPagination] = useState(initialPagination);
+
+  const fetchPage = (page: number) => {
+    getProducts(categoryId, page)
+      .then((res) => {
+        setProducts(res.data);
+        setPagination(res.pagination);
+      })
+      .catch((error) => {
+        console.error('Failed to fetch products:', error);
+      });
+  };
+
+  return (
+    <>
+      <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>
+      <Pagination {...pagination} onPageChange={fetchPage} />
+    </>
+  );
+}

src/components/pages/products/productList/productList.d.ts

@@ -0,0 +1,8 @@
+import { IPagination } from '@/models/response';
+import { IProductCardProps } from '../productCard';
+
+export interface IProductListProps {
+  initialProducts: IProductCardProps[];
+  initialPagination: IPagination;
+  categoryId: string;
+}