Pagination

"use client";
 
import { Pagination } from "@medway-ui/core";
import { useState } from "react";
 
function PaginationExample() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 10;
 
  return (
    <Pagination
      currentPage={currentPage}
      totalPages={totalPages}
      onPageChange={setCurrentPage}
      itemsPerPage={10}
      totalItems={100}
    />
  );
}
 
export default PaginationExample;

"use client";
 
import { Pagination } from "@medway-ui/core";
import { useState } from "react";
 
function BasicPagination() {
  const [currentPage, setCurrentPage] = useState(1);
 
  return (
    <Pagination
      currentPage={currentPage}
      totalPages={10}
      onPageChange={setCurrentPage}
      itemsPerPage={10}
      totalItems={100}
    />
  );
}

"use client";
 
import {
  PaginationRoot,
  PaginationContent,
  PaginationInfo,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from "@medway-ui/core";
import { useState } from "react";
 
function EmphasisPagination() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 10;
 
  const renderPageNumbers = () => {
    const pages = [];
    const maxVisible = 2;
 
    if (totalPages <= maxVisible) {
      for (let i = 1; i <= totalPages; i++) {
        pages.push(i);
      }
    } else {
      const sidePages = Math.floor(maxVisible / 2);
      if (currentPage <= sidePages + 1) {
        for (let i = 1; i <= maxVisible + 1; i++) {
          pages.push(i);
        }
        pages.push(-1, totalPages);
      } else if (currentPage >= totalPages - sidePages) {
        pages.push(1, -1);
        for (let i = totalPages - maxVisible; i <= totalPages; i++) {
          pages.push(i);
        }
      } else {
        pages.push(1, -1);
        for (
          let i = currentPage - sidePages;
          i <= currentPage + sidePages;
          i++
        ) {
          pages.push(i);
        }
        pages.push(-1, totalPages);
      }
    }
 
    return pages;
  };
 
  return (
    <PaginationRoot>
      <PaginationInfo count={10} label="itens" />
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
            disabled={currentPage === 1}
            variant="emphasis-basic"
          />
        </PaginationItem>
 
        {renderPageNumbers().map((page, index) => (
          <PaginationItem key={index}>
            {page === -1 ? (
              <PaginationEllipsis />
            ) : (
              <PaginationLink
                onClick={() => setCurrentPage(page)}
                isActive={page === currentPage}
                variant="emphasis"
              >
                {page}
              </PaginationLink>
            )}
          </PaginationItem>
        ))}
 
        <PaginationItem>
          <PaginationNext
            onClick={() =>
              setCurrentPage(Math.min(totalPages, currentPage + 1))
            }
            disabled={currentPage === totalPages}
            variant="emphasis-basic"
          />
        </PaginationItem>
      </PaginationContent>
      <PaginationInfo count={100} label="total" />
    </PaginationRoot>
  );
}

"use client";
 
import { Pagination } from "@medway-ui/core";
import { useState } from "react";
 
function FewPagesPagination() {
  const [currentPage, setCurrentPage] = useState(1);
 
  return (
    <Pagination
      currentPage={currentPage}
      totalPages={5}
      onPageChange={setCurrentPage}
      maxVisibleItems={5}
      itemsPerPage={10}
      totalItems={50}
    />
  );
}

"use client";
 
import { Pagination } from "@medway-ui/core";
import { useState } from "react";
 
function ManyPagesPagination() {
  const [currentPage, setCurrentPage] = useState(1);
 
  return (
    <Pagination
      currentPage={currentPage}
      totalPages={50}
      onPageChange={setCurrentPage}
      itemsPerPage={10}
      totalItems={500}
    />
  );
}

"use client";
 
import { Pagination } from "@medway-ui/core";
import { useState } from "react";
 
function CustomPagination() {
  const [currentPage, setCurrentPage] = useState(1);
 
  return (
    <Pagination
      currentPage={currentPage}
      totalPages={10}
      onPageChange={setCurrentPage}
      className="gap-2"
      itemsPerPage={10}
      totalItems={100}
    />
  );
}

"use client";
 
import { Pagination } from "@medway-ui/core";
import { useState } from "react";
 
function SizedPagination() {
  const [currentPage, setCurrentPage] = useState(1);
 
  return (
    <>
      <Pagination
        currentPage={currentPage}
        totalPages={5}
        onPageChange={setCurrentPage}
        size="sm"
        itemsPerPage={10}
        totalItems={50}
      />
      <Pagination
        currentPage={currentPage}
        totalPages={5}
        onPageChange={setCurrentPage}
        size="md"
        itemsPerPage={10}
        totalItems={50}
      />
      <Pagination
        currentPage={currentPage}
        totalPages={5}
        onPageChange={setCurrentPage}
        size="lg"
        itemsPerPage={10}
        totalItems={50}
      />
    </>
  );
}

"use client";
 
import { Pagination } from "@medway-ui/core";
import { useState } from "react";
 
function NonResponsivePagination() {
  const [currentPage, setCurrentPage] = useState(1);
 
  return (
    <Pagination
      currentPage={currentPage}
      totalPages={10}
      onPageChange={setCurrentPage}
      responsive={false}
      itemsPerPage={10}
      totalItems={100}
    />
  );
}