wonderlandpark/core
2
1
Fork 0
mirror of https://github.com/koreanbots/core.git synced 2025-12-16 14:30:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: paginator design change

Browse Source
This commit is contained in:
원더 2021-02-12 11:25:44 +09:00
parent 3cdb5c31a7
commit fdef8c1eaf
1 changed files with 11 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
components/Paginator.tsx
View File

@ -1,43 +1,22 @@
import Link from 'next/link' import Link from 'next/link'
const Paginator = ({ currentPage, totalPage, pathname }:PaginatorProps):JSX.Element => { const Paginator = ({ currentPage, totalPage, pathname }:PaginatorProps):JSX.Element => {
const pages = [1, currentPage >= totalPage - 1 ? totalPage - 2 : currentPage - 1, currentPage <= 2 ? 2 : currentPage >= totalPage - 1 ? totalPage - 1 : currentPage, currentPage <= 2 ? 3 : currentPage + 1, totalPage ] 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 my-12 text-center justify-center'> return <div className='flex flex-col items-center my-12 text-center justify-center'>
<div className='flex text-gray-700 dark:text-gray-400'> <div className='flex'>
<Link href={{ pathname, query: { page: currentPage - 1} }}> <Link href={{ pathname, query: { page: currentPage - 1} }}>
<a 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`}> <a 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> <i className='fas fa-chevron-left'></i>
</a> </a>
</Link> </Link>
<div className='hidden lg:flex h-12 font-medium rounded-full bg-gray-200 dark:bg-discord-black'> {
<Link href={{ pathname, query: { page: pages[0] } }}> pages.map((el, i) => <Link key={i} href={{ pathname, query: { page: el } }}>
<a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-l-full ${pages[0] === currentPage ? 'bg-gray-300 dark:bg-discord-dark-hover' : ' hover:bg-gray-300 dark:hover:bg-discord-dark-hover'}`}>{pages[0]}</a> <a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in ${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}</a>
</Link> </Link>)
{ }
pages[1] - pages[0] <= 1 ? pages[2] - pages[0] <= 1 ? '' : <a className='w-12 md:flex justify-center items-center leading-5 transition duration-150 ease-in'>...</a> : <>
<a className='w-12 md:flex justify-center items-center leading-5 transition duration-150 ease-in'>...</a>
<Link href={{ pathname, query: { page: pages[1] } }}>
<a className='w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-300 dark:hover:bg-discord-dark-hover'>{pages[1]}</a>
</Link>
</>
}
<Link href={{ pathname, query: { page: pages[2] } }}>
<a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in ${currentPage === 1 || currentPage === totalPage ? 'hover:bg-gray-300 dark:hover:bg-discord-dark-hover' : 'bg-gray-300 dark:bg-discord-dark-hover '}`}>{pages[2] === pages[4] ? pages[4] - 1 : pages[2]}</a>
</Link>
{
pages[4] - pages[3] <= 1 ? pages[4] - pages[2] <= 1 ? '' : <a className='w-12 md:flex justify-center items-center leading-5 transition duration-150 ease-in'>...</a> : <>
<Link href={{ pathname, query: { page: pages[3] } }}>
<a className='w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-300 dark:hover:bg-discord-dark-hover'>{pages[3]}</a>
</Link>
<a className='w-12 md:flex justify-center items-center leading-5 transition duration-150 ease-in'>...</a>
</>
}
<Link href={{ pathname, query: { page: pages[4] } }}>
<a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-r-full ${pages[4] === currentPage ? 'bg-gray-300 dark:bg-discord-dark-hover' : ' hover:bg-gray-300 dark:hover:bg-discord-dark-hover'}`}>{pages[4]}</a>
</Link>
</div>
<a className='flex lg:hidden h-12 w-12 ml-1 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'>
{currentPage}
</a>
<Link href={{ pathname, query: { page: currentPage + 1} }}> <Link href={{ pathname, query: { page: currentPage + 1} }}>
<a 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`}> <a 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> <i className='fas fa-chevron-right'></i>