Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Button, styled, Typography } from '@mui/material'
import { Add } from '@mui/icons-material'

const Header = styled('div')(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  position: 'relative',
  [theme.breakpoints.up('md')]: {
    justifyContent: 'center',
    button: {
      position: 'absolute',
      right: 0,
      top: '50%',
      transform: 'translateY(-50%)'
    }
  }
}))

const TitleSection = ({ onAdd, addLabel = '', title = '', ...rest }) => {
  return (
    <Header {...rest}>
      <Typography variant='h1' sx={{ fontSize: '1.1rem' }}>
        {title}
      </Typography>

      {onAdd && (
        <Button onClick={onAdd}>
          <Add />
          {addLabel}
        </Button>
      )}
    </Header>
  )
}

export default TitleSection