Create Pajinasyon component

components/awtis/pajinasyon.js

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import {useRouter} from 'next/router'
+import {makeStyles} from '@material-ui/core/styles'
+import Pagination from '@material-ui/lab/Pagination'
+import {Grid} from '@material-ui/core'
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > *': {
+      marginBottom: theme.spacing(2)
+    }
+  }
+}))
+
+export default function Pajinasyon({pajTotal, paj}) {
+  const router = useRouter()
+  const classes = useStyles()
+  const handleChange = (event, value) => {
+    const href = `/awtis?paj&paj=${value}`
+    const as = `/awtis/paj/${value}`
+    router.push(href, as)
+  }
+
+  return (
+    <Grid container justify='center'>
+      <div className={classes.root}>
+        <Pagination size='small' page={paj} count={pajTotal} color='secondary' onChange={handleChange} />
+      </div>
+    </Grid>
+  )
+}
+
+Pajinasyon.propTypes = {
+  pajTotal: PropTypes.number.isRequired,
+  paj: PropTypes.number.isRequired
+}