mirror of
https://github.com/koreanbots/core.git
synced 2025-12-15 14:10:22 +00:00
606f3cbc82
* deps: update next.js to 13 * chore: migrate to new Link component * chore: remove future option from next.config * chore: update react-select * chore: enable hideSourceMaps on sentry * chore: assert type as string * chore: make placeholder and value absolute * feat: set timeout for redirect * chore: ignore ts error * chore: add generics * chore: * chore: add ts comment * feat: use dnd-kit instead of react-sortable-hoc * fix: give absolute position to placeholder
85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import Link from 'next/link'
|
|
const Paginator: React.FC<PaginatorProps> = ({ currentPage, totalPage, pathname, searchParams }) => {
|
|
let pages = []
|
|
if (currentPage < 4)
|
|
pages = [
|
|
1,
|
|
totalPage < 2 ? null : 2,
|
|
totalPage < 3 ? null : 3,
|
|
totalPage < 4 ? null : 4,
|
|
totalPage < 5 ? null : 5,
|
|
]
|
|
else if (currentPage > totalPage - 3)
|
|
pages = [
|
|
totalPage - 4 < 1 ? null : totalPage - 4,
|
|
totalPage - 3 < 1 ? null : totalPage - 3,
|
|
totalPage - 2 < 1 ? null : totalPage - 2,
|
|
totalPage - 1 < 1 ? null : totalPage - 1,
|
|
totalPage,
|
|
]
|
|
else
|
|
pages = [
|
|
currentPage - 2 < 1 ? null : currentPage - 2,
|
|
currentPage - 1 < 1 ? null : currentPage - 1,
|
|
currentPage,
|
|
currentPage + 1 > totalPage ? null : currentPage + 1,
|
|
currentPage + 2 > totalPage ? null : currentPage + 2,
|
|
]
|
|
pages = pages.filter(el => el)
|
|
return (
|
|
<div className='flex flex-col items-center justify-center py-4 text-center'>
|
|
<div className='flex'>
|
|
<Link
|
|
href={{ pathname, hash: 'list', query: { ...searchParams, page: currentPage - 1 } }}
|
|
className={`${
|
|
currentPage === 1 ? 'invisible' : ''
|
|
} h-12 w-12 mr-1 flex justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover cursor-pointer text-center`}>
|
|
|
|
<i className='fas fa-chevron-left'></i>
|
|
|
|
</Link>
|
|
{pages.map((el, i) => (
|
|
(<Link
|
|
key={i}
|
|
href={{ pathname, hash: 'list', query: { ...searchParams, page: el } }}
|
|
className={`w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in ${
|
|
i === 0 && i === pages.length - 1
|
|
? 'rounded-full'
|
|
: i === 0
|
|
? 'rounded-l-full'
|
|
: i === pages.length - 1
|
|
? 'rounded-r-full'
|
|
: ''
|
|
} ${
|
|
currentPage === el
|
|
? 'bg-gray-300 dark:bg-discord-dark-hover'
|
|
: 'bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover'
|
|
}`}>
|
|
|
|
{el}
|
|
|
|
</Link>)
|
|
))}
|
|
<Link
|
|
href={{ pathname, hash: 'list', query: { ...searchParams, page: currentPage + 1 } }}
|
|
className={`${
|
|
currentPage === totalPage ? 'invisible' : ''
|
|
} h-12 w-12 ml-1 flex justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover cursor-pointer text-center`}>
|
|
|
|
<i className='fas fa-chevron-right'></i>
|
|
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface PaginatorProps {
|
|
pathname: string
|
|
currentPage: number
|
|
totalPage: number
|
|
searchParams?: Record<string, string|string[]>
|
|
}
|
|
|
|
export default Paginator
|