Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import React from 'react';

import { useNavigate } from 'react-router-dom';

import { useNavigate } from 'react-router-dom';

import Add from '@mui/icons-material/Add';

import Add from '@mui/icons-material/Add';

import NavigateBefore from '@mui/icons-material/NavigateBefore';

import NavigateBefore from '@mui/icons-material/NavigateBefore';

import { Button, styled, Typography, Box, IconButton } from '@mui/material';

import { Button, styled, Typography, Box, IconButton } from '@mui/material';

const Header = styled('div')(({ theme }) => ({

const Header = styled('div')(() => ({

  display: 'flex',

  display: 'flex',

  justifyContent: 'space-between',

  justifyContent: 'space-between',

  alignItems: 'center'

  alignItems: 'center'

}));

}));

export function PageHeader({ title = '', labelAdd = 'Agregar', goBack = false, onAdd }) {

export function PageHeader({ title = '', labelAdd = 'Agregar', goBack = false, onAdd }) {

  const navigate = useNavigate();

  const navigate = useNavigate();

  return (

  return (

    <Header>

    <Header>

      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>

      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>

        {goBack && (

        {goBack && (

          <IconButton onClick={() => navigate(-1)}>

          <IconButton onClick={() => navigate(-1)}>

            <NavigateBefore />

            <NavigateBefore />

          </IconButton>

          </IconButton>

        )}

        )}

        <Typography variant='h1'>{title}</Typography>

        <Typography variant='h1'>{title}</Typography>

      </Box>

      </Box>

      {onAdd && (

      {onAdd && (

        <Button variant='contained' startIcon={<Add />} onClick={onAdd}>

        <Button variant='contained' startIcon={<Add />} onClick={onAdd}>

          {labelAdd}

          {labelAdd}

        </Button>

        </Button>

      )}

      )}

    </Header>

    </Header>

  );

  );

}

}