puestos card mode

src/Components/Puestos/Card.jsx

+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+
+export function PuestoCard(props) {
+
+    let {nombre, id, description, data} = props.plaza
+    let {edit, suprime, show, set} = props.operations
+
+    return (
+        <Card sx={{ maxWidth: 345 }}>
+            <CardMedia
+                component="img"
+                alt="green iguana"
+                height="140"
+                image="https://yt3.ggpht.com/ytc/AKedOLRgmxVvijEuMGpaELK2ukM5QGGZYdnLLt065bh4=s900-c-k-c0x00ffffff-no-rj"
+                />
+            <CardContent>
+                <Typography gutterBottom variant="h5" component="div">
+                    {nombre}
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                    {description}
+                    Lizards are a widespread group of squamate reptiles, with over 6,000
+                    species, ranging across all continents except Antarctica
+                </Typography>
+            </CardContent>
+            <CardActions>
+                <Button size="small" 
+                    onClick={() => [set,show].map(fnc => fnc(props.plaza)) }>
+                    Ver
+                </Button>
+                <Button size="small" 
+                    onClick={() => [set,edit].map(fnc => fnc(props.plaza))}>
+                    Editar
+                </Button>
+                <Button size="small"
+                    onClick={() =>[set,suprime].map(fnc => fnc(props.plaza))} >
+                    Eliminar
+                </Button>
+            </CardActions>
+        </Card>
+    );
+}

src/Components/Puestos/GridMode.jsx

 import React from "react";
-import NotFound from '../../Images/not_found.png';
-
-import { 
-    RemoveRedEye as RemoveRedEyeIcon,
-    Edit as EditIcon,
-    HighlightOff as HighlightOffIcon,
-} from '@mui/icons-material';
-
 import { Grow } from '@mui/material';
-
-
-import { Row, Col } from 'react-bootstrap'
+import { Col } from 'react-bootstrap'
+import { PuestoCard } from './Card';
 
 export function GridMode(props){
 
-    let { setEdit, setDelete, setShow, setPuesto, data ,index, showing} = props;
+    let { setPuesto,setEdit, setDelete, setShow ,data, index, showing} = props;
+
+    const op ={
+        set :setPuesto,
+        edit : setEdit,
+        suprime : setDelete,
+        show : setShow,
+    }
 
     return(
         <React.Fragment> 
             {
                 data.length && showing === 'grid' ? 
-                    data[index].map( (plaza,i) => {
+                data[index].map( plaza => {
                         return(
-                        <Grow  
-                            in={true}
-                            style={{ transformOrigin: '0 0 0' }}
-                            timeout={500}
-                            key={plaza.id}
-                            >
-                            <Col  lg="4" md="6" sm="6" xs="12" >
-                                <div className="panel">
-                                    <Row>
-                                        <Col md="4">
-                                            <div className="img-container">
-                                                <img alt="not found" src={NotFound}/>
-                                            </div>
-                                        </Col>
-                                        <Col md="8">
-                                            <div className="info_details">
-                                                <p>{ plaza.nombre }</p>
-                                                <p>{ plaza.description.slice(0,17) + "..." }</p>
-                                            </div>
-                                            <div className="btn_interactivos">
-
-                                                <div className="botones_interactivos">
-                                                    <span 
-                                                        onClick={ () => {
-                                                            setPuesto(plaza)
-                                                            setShow(true)
-                                                        }} 
-                                                        tooltip-location="top" 
-                                                        tooltip="Ver plaza">
-                                                        <RemoveRedEyeIcon className="grid_btn"/>
-                                                    </span>
-                                                </div>
-                                                <div className="botones_interactivos">
-                                                    <span 
-                                                        onClick={() => {
-                                                            setPuesto(plaza)
-                                                            setEdit(true)
-                                                        }} 
-                                                        tooltip-location="top" 
-                                                        tooltip="Editar plaza">
-                                                        <EditIcon className="grid_btn"/>
-                                                    </span>
-                                                </div>
-                                                <div className="botones_interactivos">
-                                                    <span 
-                                                        onClick={() => {
-                                                            setPuesto(plaza)
-                                                            setDelete(true)
-                                                        }} 
-                                                        tooltip-location="top" 
-                                                        tooltip="Eliminar plaza">
-                                                        <HighlightOffIcon className="grid_btn"/>
-                                                    </span>
-                                                </div>
-
-                                            </div>
-                                        </Col>
-                                    </Row>
+                        <Grow in={true} style={{ transformOrigin: '0 0 0' }} timeout={500} key={plaza.id} >
+                            <Col lg="4" md="6" sm="6" xs="12" >
+                                <div style={{ padding: 15 }}>
+                                    <PuestoCard 
+                                        plaza={plaza}
+                                        operations={op} />
                                 </div>
                             </Col>
                         </Grow>

src/Components/Puestos/Material.jsx

+export function material() {
+
+    /*
+
+    let { setEdit, setDelete, setShow, setPuesto, data ,index, showing} = props;
+
+    return(
+        <React.Fragment> 
+            {
+                data.length && showing === 'grid' ? 
+                data[index].map( plaza => {
+                        return(
+                        <Grow  in={true} style={{ transformOrigin: '0 0 0' }} timeout={500} key={plaza.id} >
+                            <Col  lg="4" md="6" sm="6" xs="12" >
+                                <div className="panel">
+                                    <Row>
+                                        <Col md="4">
+                                            <div className="img-container">
+                                                <img alt="not found" src={NotFound}/>
+                                            </div>
+                                        </Col>
+                                        <Col md="8">
+                                            <div className="info_details">
+                                                <p>{ plaza.nombre }</p>
+                                                <p>{ plaza.description.slice(0,17) + "..." }</p>
+                                            </div>
+                                            <div>
+                                                <div className="botones_interactivos">
+                                                    <span 
+                                                        onClick={ () => {
+                                                            setPuesto(plaza)
+                                                            setShow(true)
+                                                        }} 
+                                                        tooltip-location="top" 
+                                                        tooltip="Ver plaza">
+                                                        <RemoveRedEyeIcon className="grid_btn"/>
+                                                    </span>
+                                                </div>
+                                                <div className="botones_interactivos">
+                                                    <span 
+                                                        onClick={() => {
+                                                            setPuesto(plaza)
+                                                            setEdit(true)
+                                                        }} 
+                                                        tooltip-location="top" 
+                                                        tooltip="Editar plaza">
+                                                        <EditIcon className="grid_btn"/>
+                                                    </span>
+                                                </div>
+                                                <div className="botones_interactivos">
+                                                    <span 
+                                                        onClick={() => {
+                                                            setPuesto(plaza)
+                                                            setDelete(true)
+                                                        }} 
+                                                        tooltip-location="top" 
+                                                        tooltip="Eliminar plaza">
+                                                        <HighlightOffIcon className="grid_btn"/>
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                </div>
+                            </Col>
+                        </Grow>
+                        )
+                }) : <div></div>
+            }
+        </React.Fragment>
+    )
+        */
+}

src/Css/all.css

 .img-container img {
     width: 100%;
 }
-.btn_interactivos{
-    padding : 15px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-evenly;
-    align-items: center;
-    align-content: space-around;
-}
-.botones_interactivos {
-    /* width: 33.33%; */
-    float: left;
-    text-align: left;
-    /* margin: 20px 0 0; */
-}
+
 .botones_interactivos i {
     color: #b9c3ce;
     transition: all 0.3s;
     margin : 3px;
 }
 .btn_add_producto:hover {
-    border: 1px solid #2ec5d3;
+    border: 1px solid var(--main);
     background: transparent;
     color: #fff;
     transition: all 0.3s;

src/Pages/Puestos.jsx

 import React, { useState, useEffect }  from 'react';
 import { Row, Col } from 'react-bootstrap'
+
 import toast, { Toaster } from 'react-hot-toast';
 
 import { 
-    ToggleButton, 
-    ToggleButtonGroup, 
-    Box,
-    Paper,
-    Pagination,
+    ToggleButton, ToggleButtonGroup, Box,
+    Paper, Pagination,
 } from '@mui/material';
 
 import { ViewList as ViewListIcon, ViewModule as ViewModuleIcon, } from '@mui/icons-material';
 
 import { default as useAuth } from '../Auth/useAuth';
 import { Service } from '../Utils/HTTP';
+import { Divide } from '../Utils/Paginate';
 
 import Express from '../Components/Modal/AgregarExpress';
 import Manual from '../Components/Modal/AgregarManual';
 import { GridMode } from '../Components/Puestos/GridMode'
 import { Add as AddIcon, } from '@mui/icons-material/'
 
-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() {
 
     return (
         <div className="content-section">
             <div className="main">
-                <Box sx={{ width: '100%' }}>
-                    <Paper sx={{ width: '100%', mb: 2, padding : 2, height: '100%', minHeight:'95vh' }}>
+                <Box sx={{}}>
+                    <Paper sx={{ mb: 2, padding : 2, height: '100%', minHeight:'95vh' }}>
 
                         <Row style={{paddingBottom : 15}}>
                             <Col md="2" sm="2" xs="2">

src/Utils/Paginate.js

+export 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
+}