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/layout/languageSwitch/index.tsx

@@ -1,28 +1,49 @@
 'use client';
 
-import Link from 'next/link';
+import images from '@/assets/images/images';
+import { TLocales } from '@/models/layout';
+import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 
 export default function LanguageSwitch() {
   const pathname = usePathname();
 
-  const pathWithoutLocale = pathname.replace(/^\/(en|fa)/, '');
+  const languages = [
+    {
+      title: 'EN',
+      image: images.langEn,
+      locale: 'en',
+    },
+    {
+      title: 'FA',
+      image: images.langFa,
+      locale: 'fa',
+    },
+  ];
+
+  const changeLocale = (locale: TLocales) => {
+    const currentLocale = pathname.split('/')[1];
+    if (currentLocale === locale) return;
+    let newPath = pathname.replace(/^\/(en|fa)/, '');
+    if (newPath === '/') newPath = '';
+
+    window.location.pathname = `/${locale}${newPath}`;
+  };
 
   return (
-    <div className="flex items-center justify-center">
-      <Link
-        href={`/en${pathWithoutLocale === '/' ? '' : pathWithoutLocale}`}
-        className="mx-2 text-gray-800 hover:text-blue-500"
-      >
-        EN
-      </Link>
-      <span className="text-gray-800">|</span>
-      <Link
-        href={`/fa${pathWithoutLocale === '/' ? '' : pathWithoutLocale}`}
-        className="mx-2 text-gray-800 hover:text-blue-500"
-      >
-        FA
-      </Link>
+    <div className="flex items-center justify-center gap-3">
+      {languages.map((language) => (
+        <div
+          className="flex cursor-pointer flex-col items-center justify-center gap-2 px-1"
+          onClick={() => changeLocale(language.locale as TLocales)}
+          key={language.title}
+        >
+          <Image src={language.image} alt={language.title} />
+          <span className="text-xs font-normal text-white">
+            {language.title}
+          </span>
+        </div>
+      ))}
     </div>
   );
 }

src/components/layout/navbar/index.tsx

@@ -11,7 +11,7 @@ import { useTranslations } from 'next-intl';
 import routeFactory from '@/assets/constants/routeFactory';
 
 export default function Navbar() {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState<boolean>(false);
   const pathname = usePathname();
   const params = useParams();
   const locale = params.locale as string;

src/components/layout/pagination/index.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import Button, { IconButton } from '@/components/uikit/button';
+import React from 'react';
+
+interface PaginationProps {
+  page: number;
+  totalPages: number;
+  onPageChange?: (page: number) => void;
+  className?: string;
+}
+
+export default function Pagination({
+  page,
+  totalPages,
+  onPageChange = () => {},
+  className,
+}: PaginationProps) {
+  if (totalPages <= 1) return null;
+
+  const pages = [];
+  for (let i = 1; i <= totalPages; i++) {
+    pages.push(i);
+  }
+
+  return (
+    <nav
+      className={`mt-8 flex items-center justify-center gap-2 ${className || ''}`}
+    >
+      <IconButton
+        disabled={page === 1}
+        onClick={() => onPageChange(page - 1)}
+        className="disabled:opacity-50"
+      >
+        &lt;
+      </IconButton>
+      {pages.map((p) => (
+        <IconButton
+          key={p}
+          className={`${p === page ? 'opacity-50' : ''}`}
+          onClick={() => onPageChange(p)}
+        >
+          {p}
+        </IconButton>
+      ))}
+      <IconButton
+        disabled={page === totalPages}
+        onClick={() => onPageChange(page + 1)}
+        className="disabled:opacity-50"
+      >
+        &gt;
+      </IconButton>
+    </nav>
+  );
+}

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;
+}

src/components/uikit/button/button.d.ts

@@ -8,6 +8,7 @@ export interface IBaseButtonProps
   disabled?: boolean;
   className?: string;
   link?: URL | string;
+  onClick?: () => void;
 }
 
 export interface ITextButtonProps extends IBaseButtonProps {

src/components/uikit/button/index.tsx

@@ -11,6 +11,7 @@ const Button: React.FC<ITextButtonProps> = ({
   endIcon,
   className,
   link,
+  onClick,
   ...props
 }) => {
   const wrapperClass = `group bg-primary relative  h-12 cursor-pointer rounded-[0.5625rem] p-[0.125rem] flex w-fit ${className || ''}`;
@@ -22,7 +23,12 @@ const Button: React.FC<ITextButtonProps> = ({
       </ButtonBody>
     </Link>
   ) : (
-    <button disabled={disabled || loading} {...props} className={wrapperClass}>
+    <button
+      disabled={disabled || loading}
+      {...props}
+      onClick={onClick}
+      className={wrapperClass}
+    >
       <ButtonBody {...props} loading={loading} endIcon={endIcon}>
         {children}
       </ButtonBody>
@@ -82,6 +88,7 @@ export const IconButton: React.FC<IIconButtonProps> = ({
   size = 'medium',
   color = 'primary',
   className,
+  onClick,
   ...props
 }) => {
   const colorClass =
@@ -95,6 +102,7 @@ export const IconButton: React.FC<IIconButtonProps> = ({
       className={`group relative flex cursor-pointer items-center justify-center rounded-[0.5625rem] ${colorClass} ${sizeClass} ${className || ''} `}
       disabled={disabled || loading}
       {...props}
+      onClick={onClick}
     >
       {loading ? (
         <svg