Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3694 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3694 Rev 3719
Línea 1... Línea 1...
1 
import React from 'react';
 1 
import React from 'react';
2 
import { Button, styled, Typography } from '@mui/material';
 2 
import { Button, styled, Typography } from '@mui/material';
3 
import Add from '@mui/icons-material/Add';
 3 
import Add from '@mui/icons-material/Add';
4 
 
 4 
 
5 
const Header = styled('div')(({ theme }) => ({
 5 
const Header = styled('div')(({ theme }) => ({
6 
  display: 'flex',
 6 
  display: 'flex',
7 
  alignItems: 'center',
 7 
  alignItems: 'center',
8 
  justifyContent: 'space-between',
 8 
  justifyContent: 'space-between',
9 
  position: 'relative',
 9 
  position: 'relative',
10 
  marginBottom: theme.spacing(1),
 10 
  marginBottom: theme.spacing(1),
11 
  [theme.breakpoints.up('md')]: {
 11 
  [theme.breakpoints.up('md')]: {
12 
    justifyContent: 'center',
 12 
    justifyContent: 'center',
13 
    button: {
 13 
    button: {
14 
      position: 'absolute',
 14 
      position: 'absolute',
15 
      right: 0,
 15 
      right: 0,
16 
      top: '50%',
 16 
      top: '50%',
17 
      transform: 'translateY(-50%)'
 17 
      transform: 'translateY(-50%)'
18 
    }
 18 
    }
19 
  }
 19 
  }
20 
}));
 20 
}));
21 
 
 21 
 
22 
const TitleSection = ({ onAdd, addLabel = '', title = '', ...rest }) => {
 22 
const TitleSection = ({ onAdd, addLabel = '', title = '', ...rest }) => {
23 
  return (
 23 
  return (
24 
    <Header {...rest}>
 24 
    <Header {...rest}>
25 
      <Typography variant='h1'>{title}</Typography>
 25 
      <Typography variant='h1'>{title}</Typography>
26 
 
 26 
 
27 
      {onAdd && (
 27 
      {onAdd && (
28 
        <Button onClick={onAdd}>
 28 
        <Button onClick={onAdd}>
29 
          <Add />
 29 
          <Add />
30 
          {addLabel}
 30 
          {addLabel}
31 
        </Button>
 31 
        </Button>
32 
      )}
 32 
      )}
33 
    </Header>
 33 
    </Header>
34 
  );
 34 
  );
35 
};
 35 
};
36 
 
 36 
 
37 
export default TitleSection;
 37 
export default TitleSection;