Components
Loading preview...
Here is Pagination component
@SubframeApp
npx shadcn@latest add https://21st.dev/r/SubframeApp/paginationimport { useState, useMemo } from "react"
export default function Pagination() {
const [pages] = useState(["1", "2", "3", "...", "8", "9", "10"])
const [currentPage, setCurrentPage] = useState(4)
const totalPages = useMemo(() => {
const numeric = pages
.filter((p): p is string => typeof p === "string" && /^\d+$/.test(p))
.map(Number)
return numeric.length ? Math.max(...numeric) : 1
}, [pages])
const goTo = (p: number) => {
const clamped = Math.min(totalPages, Math.max(1, p))
setCurrentPage(clamped)
}
return (
<div className="max-w-screen-xl mx-auto mt-12 px-4 text-gray-600 md:px-8">
<div className="flex items-center justify-between text-sm font-medium px-6 md:px-10">
<button
type="button"
onClick={() => goTo(currentPage - 1)}
disabled={currentPage === 1}
className="px-3 py-1.5 border rounded-md duration-150 hover:bg-gray-50 disabled:text-gray-400 disabled:border-gray-200 disabled:cursor-not-allowed"
>
Previous
</button>
{/* Добавлены горизонтальные отступы */}
<div className="px-4">
Page {currentPage} of {totalPages}
</div>
<button
type="button"
onClick={() => goTo(currentPage + 1)}
disabled={currentPage === totalPages}
className="px-3 py-1.5 border rounded-md duration-150 hover:bg-gray-50 disabled:text-gray-400 disabled:border-gray-200 disabled:cursor-not-allowed"
>
Next
</button>
</div>
</div>
)
}