Proyectos de Subversion LeadersLinked - SPA

import React, { useContext } from 'react'

import { DataGrid } from '@mui/x-data-grid'

import { Box, Button } from '@mui/material'

import { ParadigmsContext } from '@app/contexts/paradigms'

import Widget from '@app/components/UI/Widget'

import ParadigmsModal from './ParadigmsModal'

export default function Paradigms() {

  const { paradigms, toggleModal } = useContext(ParadigmsContext)

  const columns = [

    { field: 'id', headerName: 'ID', width: 70 },

    { field: 'description', headerName: 'Descripción' }

  ]

  return (

    <>

      <Widget>

        <Widget.Header title='Paradigmas' />

        <Widget.Body>

          <Box

            sx={{

              display: 'flex',

              alignItems: 'center',

              justifyContent: 'end',

              gap: 1,

              marginBottom: 2

            }}

          >

            <Button onClick={toggleModal}>Agregar</Button>

          </Box>

          <DataGrid

            rows={paradigms}

            columns={columns}

            initialState={{

              pagination: {

                paginationModel: { page: 0, pageSize: 10 }

              }

            }}

            pageSizeOptions={[10]}

          />

        </Widget.Body>

      </Widget>

      <ParadigmsModal />

    </>

  )

}