stevaidis/crypto-coingecko
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pager finished

Browse Source
This commit is contained in:
Ste Vaidis 2022-12-10 19:04:26 +02:00
parent 5ebf4a1a46
commit 4f9882a389
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Front/src/coinList/coinListPager.tsx
View File

@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup'; import ButtonGroup from '@mui/material/ButtonGroup';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
const Pager = (props:any): JSX.Element => { const Pager = (props:any): JSX.Element => {
@ -23,13 +23,15 @@ const Pager = (props:any): JSX.Element => {
} }
return ( return (
<ButtonGroup variant="contained" aria-label="outlined primary button group"> <Grid container justifyContent="center">
<Button disabled={page === 1} onClick={() => navigate("/")}>First</Button> <ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button disabled={page === 1} onClick={() => handlePager(page - 1)}>Prev</Button> <Button disabled={page === 1} onClick={() => navigate("/")}>First</Button>
<Typography style={{ padding: 10}}>Page {page} from {lastPage}</Typography> <Button disabled={page === 1} onClick={() => handlePager(page - 1)}>Prev</Button>
<Button disabled={page === lastPage} onClick={() => handlePager(page + 1)}>Next</Button> <Typography style={{ padding: 10}}>Page {page} from {lastPage}</Typography>
<Button disabled={page === lastPage} onClick={() => handlePager(lastPage)}>Last</Button> <Button disabled={page === lastPage} onClick={() => handlePager(page + 1)}>Next</Button>
</ButtonGroup> <Button disabled={page === lastPage} onClick={() => handlePager(lastPage)}>Last</Button>
</ButtonGroup>
</Grid>
) )
} }