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

feat: paginator scroll to list

Browse Source
This commit is contained in:
wonderlandpark 2021-03-24 13:22:40 +09:00
parent 25fd0510f6
commit f95ea30a38
3 changed files with 31 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/Paginator.tsx
View File

@ -29,7 +29,7 @@ const Paginator = ({ currentPage, totalPage, pathname }: PaginatorProps): JSX.El
return ( return (
<div className='flex flex-col items-center justify-center py-4 text-center'> <div className='flex flex-col items-center justify-center py-4 text-center'>
<div className='flex'> <div className='flex'>
<Link href={{ pathname, query: { page: currentPage - 1 } }}> <Link href={{ pathname, hash: 'list', query: { page: currentPage - 1 } }}>
<a <a
className={`${ className={`${
currentPage === 1 ? 'invisible' : '' currentPage === 1 ? 'invisible' : ''
@ -39,7 +39,7 @@ const Paginator = ({ currentPage, totalPage, pathname }: PaginatorProps): JSX.El
</a> </a>
</Link> </Link>
{pages.map((el, i) => ( {pages.map((el, i) => (
<Link key={i} href={{ pathname, query: { page: el } }}> <Link key={i} href={{ pathname, hash: 'list', query: { page: el } }}>
<a <a
className={`w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in ${ className={`w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in ${
i === 0 && i === pages.length - 1 i === 0 && i === pages.length - 1
@ -59,7 +59,7 @@ const Paginator = ({ currentPage, totalPage, pathname }: PaginatorProps): JSX.El
</a> </a>
</Link> </Link>
))} ))}
<Link href={{ pathname, query: { page: currentPage + 1 } }}> <Link href={{ pathname, hash: 'list', query: { page: currentPage + 1 } }}>
<a <a
className={`${ className={`${
currentPage === totalPage ? 'invisible' : '' currentPage === totalPage ? 'invisible' : ''

22
pages/list/votes.tsx
View File

@ -23,16 +23,18 @@ const Votes:NextPage<VotesProps> = ({ data }) => {
return <> return <>
<Hero header='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!'/> <Hero header='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!'/>
<SEO title='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!'/> <SEO title='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!'/>
<Container> <section id='list'>
<Advertisement /> <Container>
<ResponsiveGrid> <Advertisement />
{ <ResponsiveGrid>
data.data.map(bot => <BotCard key={bot.id} bot={bot} /> ) {
} data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
</ResponsiveGrid> }
<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/list/votes' /> </ResponsiveGrid>
<Advertisement /> <Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/list/votes' />
</Container> <Advertisement />
</Container>
</section>
</> </>
} }
export const getServerSideProps = async (ctx:Context) => { export const getServerSideProps = async (ctx:Context) => {

30
pages/search.tsx
View File

@ -26,20 +26,22 @@ const Search:NextPage<SearchProps> = ({ data, query }) => {
return <> return <>
<Hero header={`"${query.q}" 검색 결과`} description={`'${query.q}' 에 대한 검색 결과입니다.`} /> <Hero header={`"${query.q}" 검색 결과`} description={`'${query.q}' 에 대한 검색 결과입니다.`} />
<SEO title={`"${query.q}" 검색 결과`} description={`'${query.q}' 에 대한 검색 결과입니다.`} /> <SEO title={`"${query.q}" 검색 결과`} description={`'${query.q}' 에 대한 검색 결과입니다.`} />
<Container> <section id='list'>
<Advertisement /> <Container>
{ !data || data.data.length === 0 ? <h1 className='text-3xl font-bold text-center py-20'>검색 결과가 없습니다.</h1> : <Advertisement />
<> { !data || data.data.length === 0 ? <h1 className='text-3xl font-bold text-center py-20'>검색 결과가 없습니다.</h1> :
<ResponsiveGrid> <>
{ <ResponsiveGrid>
data.data.map(bot => <BotCard key={bot.id} bot={bot} /> ) {
} data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
</ResponsiveGrid> }
<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/search?q=${query.q}`} /> </ResponsiveGrid>
</> <Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/search?q=${query.q}`} />
} </>
<Advertisement /> }
</Container> <Advertisement />
</Container>
</section>
</> </>
} }