Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 899 Rev 1161
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react'
- 
 
 2 
import { useHistory } from 'react-router-dom'
- 
 
 3 
import { Avatar } from '@mui/material'
2 
import styled from 'styled-components'
 4 
import styled from 'styled-components'
- 
 
 5 
 
3 
import { device } from '../../styles/MediaQueries'
 6 
import { device } from '../../styles/MediaQueries'
4 
import { Avatar } from '@mui/material'
 - 
 
5 
import { Link } from 'react-router-dom'
 - 
 
Línea 6... Línea 7...
6 
 
 7 
 
7 
const LayoutContainer = styled.div`
 8 
export const StyledContainer = styled.div`
8 
  background-color: var(--bg-color);
 9 
  background-color: var(--bg-color);
9 
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
 10 
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
10 
  height: fit-content;
 11 
  height: fit-content;
11 
  width: 100%;
 12 
  width: 100%;
Línea 27... Línea 28...
27 
  @media ${device.tablet} {
 28 
  @media ${device.tablet} {
28 
    border-radius: var(--border-radius);
 29 
    border-radius: var(--border-radius);
29 
  }
 30 
  }
30 
`
 31 
`
Línea 31... Línea -...
31 
 
 - 
 
32 
const LayoutHeader = styled.div`
 - 
 
33 
  display: flex;
 - 
 
34 
  gap: 0.5rem;
 - 
 
35 
  padding: 10px 1rem;
 - 
 
36 
  align-items: center;
 - 
 
37 
  justify-content: space-between;
 - 
 
38 
  position: relative;
 - 
 
39 
`
 - 
 
40 
 
 32 
 
41 
const LayoutBody = styled.div`
 33 
StyledContainer.Body = styled.div`
42 
  padding: 10px 1rem;
 34 
  padding: 10px 1rem;
43 
  display: flex;
 35 
  display: flex;
44 
  flex-direction: column;
 36 
  flex-direction: column;
Línea 45... Línea -...
45 
`
 - 
 
46 
 
 - 
 
47 
const HeaderInfo = styled.div`
 - 
 
48 
  align-items: center;
 - 
 
49 
  display: inline-flex;
 - 
 
50 
  gap: 0.5rem;
 - 
 
51 
  width: fit-content;
 - 
 
52 
`
 - 
 
53 
 
 - 
 
54 
const HeaderContent = styled.div`
 - 
 
55 
  display: flex;
 - 
 
56 
  flex-direction: column;
 - 
 
57 
`
 37 
`
58 
 
 38 
 
59 
const LayoutActions = styled.div`
 39 
StyledContainer.Actions = styled.div`
60 
  display: flex;
 40 
  display: flex;
61 
  justify-content: space-around;
 41 
  justify-content: space-around;
62 
  border-top: 1px solid rgb(211, 211, 211);
 42 
  border-top: 1px solid rgb(211, 211, 211);
Línea 81... Línea 61...
81 
      font-size: 1rem;
 61 
      font-size: 1rem;
82 
    }
 62 
    }
83 
  }
 63 
  }
84 
`
 64 
`
Línea 85... Línea 65...
85 
 
 65 
 
- 
 
 66 
const LayoutHeader = styled.div`
- 
 
 67 
  display: flex;
- 
 
 68 
  gap: 0.5rem;
- 
 
 69 
  padding: 10px 1rem;
86 
const StyledContainer = ({ children, ...rest }) => {
 70 
  align-items: center;
- 
 
 71 
  justify-content: space-between;
87 
  return <LayoutContainer {...rest}>{children}</LayoutContainer>
 72 
  position: relative;
Línea 88... Línea 73...
88 
}
 73 
`
- 
 
 74 
 
- 
 
 75 
const HeaderInfo = styled.div`
- 
 
 76 
  align-items: center;
89 
 
 77 
  display: inline-flex;
90 
const Actions = ({ children, ...rest }) => {
 78 
  gap: 0.5rem;
Línea 91... Línea 79...
91 
  return <LayoutActions {...rest}>{children}</LayoutActions>
 79 
  width: fit-content;
- 
 
 80 
`
92 
}
 81 
 
93 
 
 82 
const HeaderContent = styled.div`
Línea 94... Línea 83...
94 
const Body = ({ children, ...rest }) => {
 83 
  display: flex;
95 
  return <LayoutBody {...rest}>{children}</LayoutBody>
 84 
  flex-direction: column;
96 
}
 85 
`
97 
 
 86 
 
98 
const Header = ({
 87 
const Header = ({
99 
  image = '',
 88 
  image = '',
100 
  title = '',
 89 
  title = '',
101 
  url = '',
 90 
  url = '',
- 
 
 91 
  timeElapsed = '',
- 
 
 92 
  children,
- 
 
 93 
  ...rest
- 
 
 94 
}) => {
- 
 
 95 
  const history = useHistory()
- 
 
 96 
 
- 
 
 97 
  const goToProfile = () => {
102 
  timeElapsed = '',
 98 
    if (!url) return
103 
  children,
 99 
    history.replace(url)
104 
  ...rest
 100 
  }
105 
}) => {
 101 
 
106 
  return (
 102 
  return (
Línea 112... Línea 108...
112 
            alt={`${title} profile image`}
 108 
            alt={`${title} profile image`}
113 
            sx={{ width: '50px', height: '50px' }}
 109 
            sx={{ width: '50px', height: '50px' }}
114 
          />
 110 
          />
115 
        )}
 111 
        )}
116 
        <HeaderContent>
 112 
        <HeaderContent>
117 
          {url ? (
 - 
 
118 
            <Link to={url}>
 - 
 
119 
              <h2>{title}</h2>
 113 
          <h2 onClick={goToProfile}>{title}</h2>
120 
            </Link>
 - 
 
121 
          ) : (
 - 
 
122 
            <h2>{title}</h2>
 - 
 
123 
          )}
 114 
 
124 
          {timeElapsed && <span>{timeElapsed}</span>}
 115 
          {timeElapsed && <span>{timeElapsed}</span>}
125 
        </HeaderContent>
 116 
        </HeaderContent>
126 
      </HeaderInfo>
 117 
      </HeaderInfo>
127 
      {children}
 118 
      {children}
128 
    </LayoutHeader>
 119 
    </LayoutHeader>
129 
  )
 120 
  )
130 
}
 121 
}
Línea 131... Línea -...
131 
 
 - 
 
132 
StyledContainer.Actions = Actions
 122 
 
133 
StyledContainer.Header = Header
 - 
 
Línea 134... Línea 123...
134 
StyledContainer.Body = Body
 123 
StyledContainer.Header = Header