paginar plazas

src/App.css

 .btn_plaza_common:hover{
     color:var(--second) !important;
 }
+.center_pagination_puestos{
+    display :flex;
+    flex-direction :row;
+}
 

src/Components/Puestos/GridMode.jsx

 
 export function GridMode(props){
 
-    let { setEdit, setDelete, setShow, setPuesto, data } = props;
+    let { setEdit, setDelete, setShow, setPuesto, data ,index} = props;
+    console.log('data reci', data,index)
 
     return(
         <React.Fragment> 
             {
                 data.length ? 
-                    data.map( plaza => {
+                    data[index].map( plaza => {
                         return(
                             <Col key={plaza.id} lg="4" md="6" sm="6" xs="12" >
                                 <div className="panel">
                                 </div>
                             </Col>
                         )
-                    }) : <h1>no hay data</h1>
+                }) : <div>no hay ni mierda</div>
             }
         </React.Fragment>
     )

src/Components/Puestos/ListMode.jsx

 export function ListMode(props) {
     
     const opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
-    let { setEdit, setDelete, setShow, setPuesto, data } = props;
+    let { setEdit, setDelete, setShow, setPuesto, data, index } = props;
 
     return(
         <Col md="12">
 
                         {
                             data.length ? 
-                                data.slice( 0,23 ).map( (plaza) => {
+                                data[index].map( (plaza) => {
                                     return (
                                         <tr key={plaza.id}>
                                             <td className="text-center">{ plaza.nombre }</td>

src/Pages/Puestos.jsx

 import { Row, Col } from 'react-bootstrap'
 import toast, { Toaster } from 'react-hot-toast';
 
-import { ToggleButton, ToggleButtonGroup, Box, Paper } from '@mui/material';
+import { 
+    ToggleButton, 
+    ToggleButtonGroup, 
+    Box,
+    Paper,
+    Pagination,
+} from '@mui/material';
 
 import { ViewList as ViewListIcon, ViewModule as ViewModuleIcon, } from '@mui/icons-material';
 
 const Success =  () => toast.success('Plaza Agregada!!')
 const Error =  () => toast.error('Ups creo que ocurrio un error, intentalo nuevamente')
 
+function Divide(arregloOriginal){
+    const LONGITUD_PEDAZOS = 9;
+    let arregloDeArreglos = [];
+    for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
+        let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
+        arregloDeArreglos.push(pedazo);
+    }
+    return arregloDeArreglos
+}
+
 export function Puestos() {
 
     const auth = useAuth();
-    const [data, setData] = useState({});
+    const [data, setData] = useState([]);
+    const [page, setPage] = useState(1);
     const token = auth.getToken();
+    
+    const changePage = ( _ , value) => {
+        let page_numer = value;
+        // let divided =  Divide(data)
+        setPage(page_numer);
+        // setData(divided)
+    };
 
     useEffect(() => {
 
                     data: e
                 };
             })
-            setData(entries)
+            setData(Divide(entries))
         })
         .catch((error) => {
             console.log('error fetching data  ', error );
 
     },[token])
 
-    const [alignment, setAlignment] = React.useState('list');
+    // const [alignment, setAlignment] = React.useState('list');
+    const [alignment, setAlignment] = React.useState('grid');
 
-    const handleChange = (_event, newAlignment) => {
-        console.log("new alignment :: ", newAlignment );
-        setAlignment(newAlignment)
-    } ;
+    const handleChange = (_event, newAlignment) => setAlignment(newAlignment)
 
     const children = [
         <ToggleButton value="list" key="list">
 
     let [puesto, setPuesto] = React.useState(false);
 
-    let [manual, setManual] = React.useState(true);
+    let [manual, setManual] = React.useState(false);
     let [expres, setExpress] = React.useState(false);
 
     let [edit, setEdit] = React.useState(false);
         <div className="content-section">
             <div className="main">
                 <Box sx={{ width: '100%' }}>
-                    <Paper sx={{ width: '100%', mb: 2, padding : 2, height: '95vh' }}>
+                    <Paper sx={{ width: '100%', mb: 2, padding : 2, height: '100%', minHeight:'95vh' }}>
 
                         <Row style={{paddingBottom : 15}}>
                             <Col md="2" sm="2" xs="2">
                             <Row>
                                 <GridMode
                                     data={data}
+                                    index={page - 1}
                                     setPuesto={setPuesto}
                                     setEdit={setEdit}
                                     setDelete={setDelete}
                             <Row>
                                 <ListMode 
                                     data={data}
+                                    index={page -1}
                                     setPuesto={setPuesto}
                                     setEdit={setEdit}
                                     setDelete={setDelete}
                             </Row>
                         </div>
 
+                            <Pagination 
+                                sx={{
+                                    "& ul" :{
+                                        "padding-top" : "20px",
+                                        "justify-content": "center"
+                                    }
+                                }}
+                                siblingCount={2} 
+                                boundaryCount={2}
+                                shape='rounded' 
+                                count={data.length} 
+                                page={page} 
+                                onChange={changePage} 
+                            />
+
                     </Paper>
                 </Box>