Pagination

pagination-1779393693076.tsx

'use client'
import { useState } from 'react'

export default function Pagination({ total = 50, perPage = 5 }) {
  const [page, setPage] = useState(1)
  const pages = Math.ceil(total / perPage)
  const getPages = () => {
    if (pages <= 7) return Array.from({ length: pages }, (_, i) => i + 1)
    if (page <= 3) return [1,2,3,4,'...',pages]
    if (page >= pages - 2) return [1,'...',pages-3,pages-2,pages-1,pages]
    return [1,'...',page-1,page,page+1,'...',pages]
  }
  const btn = (content, p, disabled = false) => (
    <button
      key={content + p}
      onClick={() => typeof p === 'number' && setPage(p)}
      disabled={disabled || content === '...'}
      style={{
        width: '36px', height: '36px', borderRadius: '8px', border: '1px solid #e2e8f0',
        background: page === p ? '#6d28d9' : '#fff',
        color: page === p ? '#fff' : '#374151',
        cursor: disabled || content === '...' ? 'default' : 'pointer',
        fontWeight: page === p ? 700 : 400, fontSize: '14px',
        transition: 'all 0.15s',
      }}
    >{content}</button>
  )
  return (
    <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
      {btn('←', page - 1, page === 1)}
      {getPages().map((p, i) => btn(p, p))}
      {btn('→', page + 1, page === pages)}
    </div>
  )
}

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Pagination component with ellipsis and prev/next controls

More from 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

'use client'
import { useState } from 'react'

const NAV = [
  { id: 'home', icon: '◉', label: 'Overview', shortcut: 'G H' },
  { id: 'components', icon: '⬡', label: 'Components', shortcut: 'G C', badge: 120, children: [
    { id: 'buttons', label: '

SidebarNav

Navigation

'use client';

import React from 'react';

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

const PaginationNav: React.FC<PaginationNavProps> = ({ currentPage, totalPages, onPageCh

PaginationNav

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