Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 532 | Rev 535 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 532 Rev 534
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react'
2 
import styled from 'styled-components'
 2 
import styled from 'styled-components'
3 
import { device } from '../../styles/MediaQueries'
 3 
import { device } from '../../styles/MediaQueries'
- 
 
 4 
import { Avatar } from '@mui/material'
Línea 4... Línea 5...
4 
 
 5 
 
5 
const LayoutContainer = styled.div`
 6 
const LayoutContainer = styled.div`
6 
  background-color: var(--bg-color);
 7 
  background-color: var(--bg-color);
7 
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
 8 
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
Línea 28... Línea 29...
28 
  padding: 5px 1rem;
 29 
  padding: 5px 1rem;
29 
  align-items: center;
 30 
  align-items: center;
30 
  position: relative;
 31 
  position: relative;
31 
`
 32 
`
Línea -... Línea 33...
- 
 
 33 
 
- 
 
 34 
const HeaderInfo = styled.div`
- 
 
 35 
  align-items: center;
- 
 
 36 
  display: inline-flex;
- 
 
 37 
  gap: 0.5rem;
- 
 
 38 
  width: fit-content;
- 
 
 39 
`
32 
 
 40 
 
33 
const LayoutActions = styled.div`
 41 
const LayoutActions = styled.div`
34 
  display: flex;
 42 
  display: flex;
35 
  justify-content: space-around;
 43 
  justify-content: space-around;
36 
  border-top: 1px solid rgb(211, 211, 211);
 44 
  border-top: 1px solid rgb(211, 211, 211);
Línea 61... Línea 69...
61 
 
 69 
 
62 
const Actions = ({ children, ...rest }) => {
 70 
const Actions = ({ children, ...rest }) => {
63 
  return <LayoutActions {...rest}>{children}</LayoutActions>
 71 
  return <LayoutActions {...rest}>{children}</LayoutActions>
Línea 64... Línea 72...
64 
}
 72 
}
- 
 
 73 
 
65 
 
 74 
const Header = ({ image, title, children, ...rest }) => {
- 
 
 75 
  return (
- 
 
 76 
    <LayoutHeader {...rest}>
- 
 
 77 
      <HeaderInfo>
- 
 
 78 
        {image && (
- 
 
 79 
          <Avatar
- 
 
 80 
            src={image}
- 
 
 81 
            alt={`${title} profile image`}
- 
 
 82 
            sx={{ width: '50px', height: '50px' }}
- 
 
 83 
          />
- 
 
 84 
        )}
- 
 
 85 
        {title && <h2>{title}</h2>}
- 
 
 86 
      </HeaderInfo>
- 
 
 87 
      {children}
66 
const Header = ({ children, ...rest }) => {
 88 
    </LayoutHeader>
Línea 67... Línea 89...
67 
  return <LayoutHeader {...rest}>{children}</LayoutHeader>
 89 
  )
68 
}
 90 
}