feat: add pagination feature in blog page

components/buttons/Button.tsx

@@ -76,13 +76,13 @@ export default function Button({
         data-testid='Button-main'
       >
         {icon && iconPosition === ButtonIconPosition.LEFT && (
-          <span className='mr-2 inline-block' data-testid='Button-icon-left'>
+          <span className='inline-block' data-testid='Button-icon-left'>
             {icon}
           </span>
         )}
         <span className='inline-block'>{text}</span>
         {icon && iconPosition === ButtonIconPosition.RIGHT && (
-          <span className='ml-2 inline-block' data-testid='Button-icon-right'>
+          <span className='inline-block' data-testid='Button-icon-right'>
             {icon}
           </span>
         )}
@@ -98,9 +98,9 @@ export default function Button({
       className={buttonSize === ButtonSize.SMALL ? smallButtonClasses : classNames}
       data-testid='Button-link'
     >
-      {icon && iconPosition === ButtonIconPosition.LEFT && <span className='mr-2 inline-block'>{icon}</span>}
+      {icon && iconPosition === ButtonIconPosition.LEFT && <span className='inline-block'>{icon}</span>}
       <span className='inline-block'>{text}</span>
-      {icon && iconPosition === ButtonIconPosition.RIGHT && <span className='ml-2 inline-block'>{icon}</span>}
+      {icon && iconPosition === ButtonIconPosition.RIGHT && <span className='inline-block'>{icon}</span>}
     </Link>
   );
 }

components/helpers/usePagination.ts

@@ -0,0 +1,52 @@
+import { useCallback, useMemo, useState } from 'react';
+
+/**
+ * @description Custom hook for managing pagination logic
+ * @example const { currentPage, setCurrentPage, currentItems, maxPage } = usePagination(items, 10, { currentPage: 2 });
+ * @param {T[]} items - Array of items to paginate
+ * @param {number} itemsPerPage - Number of items per page
+ * @param {object} [options] - Pagination options
+ * @param {number} [options.currentPage] - Optional current page (controlled)
+ * @param {(page: number) => void} [options.onPageChange] - Called when setCurrentPage is invoked in controlled mode
+ * @returns {object}
+ * @returns {number} currentPage - Current page number
+ * @returns {function} setCurrentPage - Function to update the current page
+ * @returns {T[]} currentItems - Items for the current page
+ * @returns {number} maxPage - Total number of pages
+ */
+export function usePagination<T>(
+  items: T[],
+  itemsPerPage: number,
+  options: { currentPage?: number; onPageChange?: (page: number) => void } = {}
+) {
+  const [internalPage, setInternalPage] = useState(1);
+  const { currentPage: controlledPage, onPageChange } = options;
+  const isControlled = typeof controlledPage === 'number' && !Number.isNaN(controlledPage);
+  const page = isControlled ? (controlledPage as number) : internalPage;
+  const maxPage = Math.ceil(items.length / itemsPerPage);
+  const safePage = maxPage === 0 ? 1 : Math.min(Math.max(page, 1), maxPage);
+  const setCurrentPage = useCallback(
+    (nextPage: number) => {
+      if (isControlled) {
+        onPageChange?.(nextPage);
+
+        return;
+      }
+      setInternalPage(nextPage);
+    },
+    [isControlled, onPageChange]
+  );
+
+  const currentItems = useMemo(() => {
+    const start = (safePage - 1) * itemsPerPage;
+
+    return items.slice(start, start + itemsPerPage);
+  }, [items, safePage, itemsPerPage]);
+
+  return {
+    currentPage: safePage,
+    setCurrentPage,
+    currentItems,
+    maxPage
+  };
+}

components/icons/Next.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
+ * @description Icons for Next button
+ */
+export default function IconNext() {
+  return (
+    <svg
+      width='20'
+      height='20'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className='stroke-current'
+    >
+      <path d='M9 6L15 12L9 18' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+    </svg>
+  );
+}

components/icons/Previous.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
+ * @description Icons for Previous button in pagination
+ */
+export default function IconPrevious() {
+  return (
+    <svg
+      width='20'
+      height='20'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className='stroke-current'
+    >
+      <path d='M15 18L9 12L15 6' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+    </svg>
+  );
+}

components/navigation/Filter.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import Select from '../form/Select';
 import { applyFilterList, type DataObject, type Filter as FilterQuery, onFilterApply } from '../helpers/applyFilter';
@@ -10,7 +10,7 @@ interface Check {
 
 interface FilterProps<T extends DataObject = DataObject> {
   data: T[];
-  onFilter: (data: T[], query: FilterQuery) => void;
+  onFilter?: (data: T[], query: FilterQuery) => void;
   checks: Check[];
   className?: string;
 }
@@ -32,14 +32,24 @@ export default function Filter<T extends DataObject = DataObject>({
   const route = useRouter();
   const [filters, setFilters] = useState<Record<string, { value: string; text: string }[]>>({});
   const [routeQuery, setQuery] = useState<Record<string, string>>({});
+  const lastFilterKeyRef = useRef<string | null>(null);
 
   useEffect(() => {
     setQuery(route.query as Record<string, string>);
     applyFilterList(checks, data, setFilters);
   }, [route, checks, data]);
 
   useEffect(() => {
-    onFilterApply(data, onFilter, routeQuery);
+    if (!onFilter) return;
+    const filterableQuery = Object.fromEntries(Object.entries(routeQuery).filter(([key]) => key !== 'page'));
+    const filterKey = Object.entries(filterableQuery)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([key, value]) => `${key}:${value}`)
+      .join('|');
+
+    if (filterKey === lastFilterKeyRef.current) return;
+    lastFilterKeyRef.current = filterKey;
+    onFilterApply(data, onFilter, filterableQuery);
   }, [routeQuery, data, onFilter]);
 
   return checks.map((check) => {

components/pagination/Pagination.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+
+import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
+
+import Button from '../buttons/Button';
+import IconNext from '../icons/Next';
+import IconPrevious from '../icons/Previous';
+import PaginationItem from './PaginationItem';
+
+export interface PaginationProps {
+  // eslint-disable-next-line prettier/prettier
+
+  /** Total number of pages */
+  totalPages: number;
+
+  /** Current active page */
+  currentPage: number;
+
+  /** Function to handle page changes */
+  onPageChange: (page: number) => void;
+}
+
+/**
+ * This is the Pagination component. It displays a list of page numbers that can be clicked to navigate.
+ */
+export default function Pagination({ totalPages, currentPage, onPageChange }: PaginationProps) {
+  const handlePageChange = (page: number) => {
+    if (page >= 1 && page <= totalPages) {
+      onPageChange(page);
+    }
+  };
+
+  /**
+   * @returns number of pages shows in Pagination.
+   */
+  const getPageNumber = (): (number | 'start-ellipsis' | 'end-ellipsis')[] => {
+    if (totalPages <= 6) {
+      return Array.from({ length: Math.max(0, totalPages) }, (_, i) => i + 1);
+    }
+
+    const pages: (number | 'start-ellipsis' | 'end-ellipsis')[] = [1];
+
+    const left = Math.max(2, currentPage - 1);
+    const right = Math.min(totalPages - 1, currentPage + 1);
+
+    if (left > 2) pages.push('start-ellipsis');
+    for (let i = left; i <= right; i++) pages.push(i);
+    if (right < totalPages - 1) pages.push('end-ellipsis');
+
+    pages.push(totalPages);
+
+    return pages;
+  };
+
+  return (
+    <nav
+      role='navigation'
+      aria-label='Pagination'
+      className='font-inter flex items-center justify-center gap-2 md:gap-8'
+    >
+      {/* Previous button */}
+      <Button
+        onClick={() => handlePageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        className={`font-normal flex h-[34px] items-center justify-center rounded bg-white px-3 py-[7px] text-sm
+          leading-[17px]
+          tracking-[-0.01em] ${
+            currentPage === 1
+              ? 'hover:bg-gray-white cursor-not-allowed text-gray-300'
+              : 'text-[#141717] hover:bg-gray-50'
+          }`}
+        text=''
+        icon={<IconPrevious />}
+        iconPosition={ButtonIconPosition.LEFT}
+        aria-label='Go to previous page'
+      />
+
+      {/* Page numbers */}
+      <div className='flex gap-2' role='list'>
+        {getPageNumber().map((page) =>
+          typeof page === 'number' ? (
+            <PaginationItem
+              key={page}
+              pageNumber={page}
+              isActive={page === currentPage}
+              onPageChange={handlePageChange}
+              aria-label={`Go to page ${page}`}
+            />
+          ) : (
+            <span
+              key={page}
+              className='font-inter flex size-8 items-center justify-center text-sm font-semibold text-[#6B6B6B] md:size-10'
+              aria-hidden='true'
+            >
+              ...
+            </span>
+          )
+        )}
+      </div>
+
+      {/* Next button */}
+      <Button
+        onClick={() => handlePageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        className={`
+          font-normal flex h-[34px] items-center justify-center rounded bg-white px-3 py-[7px] text-sm leading-[17px]
+          tracking-[-0.01em] ${
+            currentPage === totalPages
+              ? 'hover:bg-gray-white cursor-not-allowed text-gray-300'
+              : 'text-[#141717] hover:bg-gray-50'
+          }`}
+        text=''
+        icon={<IconNext />}
+        aria-label='Go to next page'
+      />
+    </nav>
+  );
+}

components/pagination/PaginationItem.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+export interface PaginationItemProps {
+  // eslint-disable-next-line prettier/prettier
+
+  /** The page number to display */
+  pageNumber: number;
+
+  /** Whether this page is currently active */
+  isActive: boolean;
+
+  /** Function to handle page change */
+  onPageChange: (page: number) => void;
+}
+
+/**
+ * This is the PaginationItem component. It displays a single page number that can be clicked.
+ */
+export default function PaginationItem({
+  pageNumber,
+  isActive,
+  onPageChange,
+  ...buttonProps
+}: PaginationItemProps & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      onClick={() => onPageChange(pageNumber)}
+      className={`font-inter font-normal relative flex size-8 items-center
+        justify-center rounded-full text-xs leading-[26px] md:size-10 md:text-sm
+        ${isActive ? 'bg-[#6200EE] text-white' : 'bg-transparent text-[#141717] hover:bg-gray-50'}
+      `}
+      aria-current={isActive ? 'page' : undefined}
+      {...buttonProps}
+    >
+      {pageNumber}
+    </button>
+  );
+}