PaginationNav

paginationnav-1779354212307.tsx

'use client';

import React from 'react';

interface PaginationNavProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

const PaginationNav: React.FC<PaginationNavProps> = ({ currentPage, totalPages, onPageChange }) => {
  const pages = [];
  for (let i = 1; i <= totalPages; i++) {
    pages.push(i);
  }

  const handlePageChange = (page: number) => {
    onPageChange(page);
  };

  return (
    <nav className="bg-zinc-950 py-4 flex justify-center">
      <button
        className={`mr-2 ${currentPage === 1 ? 'text-zinc-500' : 'text-gold hover:text-gold'} transition duration-300`}
        onClick={() => handlePageChange(currentPage - 1)}
        disabled={currentPage === 1}
      >
        Prev
      </button>
      {pages.slice(0, 3).map((page) => (
        <button
          key={page}
          className={`mx-1 ${currentPage === page ? 'bg-gold text-zinc-950' : 'text-gold hover:bg-gold hover:text-zinc-950'} transition duration-300 py-1 px-2 rounded`}
          onClick={() => handlePageChange(page)}
        >
          {page}
        </button>
      ))}
      {totalPages > 5 && (
        <span className="mx-1 text-zinc-500">...</span>
      )}
      {pages.slice(totalPages - 2, totalPages).map((page) => (
        <button
          key={page}
          className={`mx-1 ${currentPage === page ? 'bg-gold text-zinc-950' : 'text-gold hover:bg-gold hover:text-zinc-950'} transition duration-300 py-1 px-2 rounded`}
          onClick={() => handlePageChange(page)}
        >
          {page}
        </button>
      ))}
      <button
        className={`ml-2 ${currentPage === totalPages ? 'text-zinc-500' : 'text-gold hover:text-gold'} transition duration-300`}
        onClick={() => handlePageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
      >
        Next
      </button>
    </nav>
  );
};

export default PaginationNav;

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Pagination component with ellipsis

More from Navigation

'use client';

import React, { useState } from 'react';

interface Tab {
  id: number;
  label: string;
}

const tabs: Tab[] = [
  { id: 1, label: 'Tab 1' },
  { id: 2, label: 'Tab 2' },
  { id: 3, label: 'Tab 3' },
  { id: 4, label: 'Tab 4' },
];

c

TabsNav

Navigation

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface FloatingDockProps {
  icons: { id: number; src: string; }[];
}

class FloatingDock extends React.Component<FloatingDockProps, {}> {
  constructor(props: FloatingDockPro

FloatingDock

Navigation

// @types/react
// @types/react-dom
import React, { useState } from 'react';
import './MegaMenu.css';

interface MegaMenuProps {
  title: string;
  items: {
    column: string;
    link: string;
    text: string;
  }[];
}

const MegaMenu: React.FC<Me

MegaMenu

Navigation

import React from 'react';
import './GlassNavbar.css';

interface Props {
  title: string;
}

const GlassNavbar: React.FC<Props> = ({ title }) => {
  return (
    <nav className='glass-navbar'>
      <div className='glass-navbar-container'>
        <

GlassNavbar

Navigation