social nav + search system #37
40
src/components/Pagination.tsx
Normal file
40
src/components/Pagination.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
type PaginationProps = {
|
||||||
|
page: number
|
||||||
|
disabledNext: boolean
|
||||||
|
handlePrev: () => void
|
||||||
|
handleNext: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Pagination = React.memo(
|
||||||
|
({ page, disabledNext, handlePrev, handleNext }: PaginationProps) => {
|
||||||
|
return (
|
||||||
|
<div className='IBMSecMain'>
|
||||||
|
<div className='PaginationMain'>
|
||||||
|
<div className='PaginationMainInside'>
|
||||||
|
<button
|
||||||
|
className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
|
||||||
|
onClick={handlePrev}
|
||||||
|
disabled={page === 1}
|
||||||
|
>
|
||||||
|
<i className='fas fa-chevron-left'></i>
|
||||||
|
</button>
|
||||||
|
<div className='PaginationMainInsideBoxGroup'>
|
||||||
|
<button className='PaginationMainInsideBox PMIBActive'>
|
||||||
|
<p>{page}</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
|
||||||
|
onClick={handleNext}
|
||||||
|
disabled={disabledNext}
|
||||||
|
>
|
||||||
|
<i className='fas fa-chevron-right'></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
@ -19,6 +19,7 @@ import '../styles/styles.css'
|
|||||||
import { ModDetails, MuteLists } from '../types'
|
import { ModDetails, MuteLists } from '../types'
|
||||||
import { fetchMods } from '../utils'
|
import { fetchMods } from '../utils'
|
||||||
import { MOD_FILTER_LIMIT } from '../constants'
|
import { MOD_FILTER_LIMIT } from '../constants'
|
||||||
|
import { Pagination } from 'components/Pagination'
|
||||||
|
|
||||||
enum SortBy {
|
enum SortBy {
|
||||||
Latest = 'Latest',
|
Latest = 'Latest',
|
||||||
@ -421,42 +422,3 @@ const Filters = React.memo(
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
type PaginationProps = {
|
|
||||||
page: number
|
|
||||||
disabledNext: boolean
|
|
||||||
handlePrev: () => void
|
|
||||||
handleNext: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const Pagination = React.memo(
|
|
||||||
({ page, disabledNext, handlePrev, handleNext }: PaginationProps) => {
|
|
||||||
return (
|
|
||||||
<div className='IBMSecMain'>
|
|
||||||
<div className='PaginationMain'>
|
|
||||||
<div className='PaginationMainInside'>
|
|
||||||
<button
|
|
||||||
className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
|
|
||||||
onClick={handlePrev}
|
|
||||||
disabled={page === 1}
|
|
||||||
>
|
|
||||||
<i className='fas fa-chevron-left'></i>
|
|
||||||
</button>
|
|
||||||
<div className='PaginationMainInsideBoxGroup'>
|
|
||||||
<button className='PaginationMainInsideBox PMIBActive'>
|
|
||||||
<p>{page}</p>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
|
|
||||||
onClick={handleNext}
|
|
||||||
disabled={disabledNext}
|
|
||||||
>
|
|
||||||
<i className='fas fa-chevron-right'></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
Loading…
Reference in New Issue
Block a user