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

style: for mobile

Browse Source
This commit is contained in:
원더 2021-01-26 12:20:07 +09:00
parent 9228eddc2c
commit 8468140c60
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/Paginator.tsx
View File

@ -4,11 +4,11 @@ const Paginator = ({ currentPage, totalPage, pathname }:PaginatorProps):JSX.Elem
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 text-gray-700 dark:text-gray-400'>
<Link href={{ pathname, query: { page: currentPage - 1} }}> <Link href={{ pathname, query: { page: currentPage - 1} }}>
<a className={`${currentPage === 1 ? 'hidden' : ''} 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='flex h-12 font-medium rounded-full bg-gray-200 dark:bg-discord-black'> <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] } }}> <Link href={{ pathname, query: { page: pages[0] } }}>
<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 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>
</Link> </Link>
@ -35,8 +35,11 @@ const Paginator = ({ currentPage, totalPage, pathname }:PaginatorProps):JSX.Elem
<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> <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> </Link>
</div> </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 ? 'hidden' : '' } 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>
</a> </a>
</Link> </Link>