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 />
    </>
  )
}