Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { Container } from 'react-bootstrap'

import styled from 'styled-components'

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

import { device } from '../../styles/MediaQueries'

const StyledHeader = styled(Container)`

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  h1 {

    font-size: 1.1rem;

    font-weight: 600;

  }

  button {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    position: relative;

    font-weight: 600;

    @media ${device.tablet} {

      position: absolute;

      right: 0;

      top: 50%;

      transform: translateY(-50%);

    }

  }

  @media ${device.mobile} {

    justify-content: space-between;

  }

`

const TitleSection = ({ onAdd = () => null, addLabel = '', title = '' }) => {

  return (

    <StyledHeader>

      <h1>{title}</h1>

      <button onClick={onAdd}>

        <AddIcon />

        {addLabel}

      </button>

    </StyledHeader>

  )

}

export default TitleSection