Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1161 | Rev 1507 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
656 stevensc 1 
import React from 'react'
1161 stevensc 2 
import { useHistory } from 'react-router-dom'
1298 stevensc 3 
import { Avatar, Box } from '@mui/material'
656 stevensc 4 
import styled from 'styled-components'
1161 stevensc 5 
 
656 stevensc 6 
import { device } from '../../styles/MediaQueries'
5 stevensc 7 
 
1298 stevensc 8 
export const StyledContainer = styled(Box)`
530 stevensc 9 
  background-color: var(--bg-color);
10 
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
5 stevensc 11 
  height: fit-content;
849 stevensc 12 
  width: 100%;
13 
  box-sizing: border-box;
597 stevensc 14 
  overflow: hidden;
15 
  position: relative;
536 stevensc 16 
  span {
17 
    font-size: 0.9rem;
18 
  }
611 stevensc 19 
  p {
20 
    color: var(--font-color);
21 
    font-size: 14px;
22 
    text-align: justify;
617 stevensc 23 
    margin-bottom: 0.5rem;
611 stevensc 24 
  }
25 
  h2 {
26 
    font-size: 1rem;
27 
  }
530 stevensc 28 
  @media ${device.tablet} {
29 
    border-radius: var(--border-radius);
30 
  }
656 stevensc 31 
`
5 stevensc 32 
 
1161 stevensc 33 
StyledContainer.Body = styled.div`
616 stevensc 34 
  padding: 10px 1rem;
554 stevensc 35 
  display: flex;
36 
  flex-direction: column;
656 stevensc 37 
`
535 stevensc 38 
 
1161 stevensc 39 
StyledContainer.Actions = styled.div`
714 stevensc 40 
  display: flex;
532 stevensc 41 
  justify-content: space-around;
531 stevensc 42 
  border-top: 1px solid rgb(211, 211, 211);
645 stevensc 43 
  padding: 5px;
899 stevensc 44 
  gap: 0.5rem;
656 stevensc 45 
  & > button,
46 
  & > a {
531 stevensc 47 
    align-items: center;
48 
    border-radius: var(--border-radius);
49 
    cursor: pointer;
50 
    display: inline-flex;
51 
    flex-direction: column;
52 
    font-size: 0.9rem;
53 
    padding: 5px;
54 
    position: relative;
55 
    &:hover {
56 
      background-color: whitesmoke;
57 
    }
58 
    @media ${device.tablet} {
59 
      flex-direction: row;
60 
      gap: 0.5rem;
61 
      font-size: 1rem;
62 
    }
63 
  }
656 stevensc 64 
`
531 stevensc 65 
 
1161 stevensc 66 
const LayoutHeader = styled.div`
67 
  display: flex;
68 
  gap: 0.5rem;
69 
  padding: 10px 1rem;
70 
  align-items: center;
71 
  justify-content: space-between;
72 
  position: relative;
73 
`
5 stevensc 74 
 
1161 stevensc 75 
const HeaderInfo = styled.div`
76 
  align-items: center;
77 
  display: inline-flex;
78 
  gap: 0.5rem;
79 
  width: fit-content;
80 
`
531 stevensc 81 
 
1161 stevensc 82 
const HeaderContent = styled.div`
83 
  display: flex;
84 
  flex-direction: column;
85 
`
535 stevensc 86 
 
714 stevensc 87 
const Header = ({
88 
  image = '',
89 
  title = '',
90 
  url = '',
91 
  timeElapsed = '',
92 
  children,
93 
  ...rest
94 
}) => {
1161 stevensc 95 
  const history = useHistory()
96 
 
97 
  const goToProfile = () => {
98 
    if (!url) return
99 
    history.replace(url)
100 
  }
101 
 
534 stevensc 102 
  return (
103 
    <LayoutHeader {...rest}>
104 
      <HeaderInfo>
105 
        {image && (
106 
          <Avatar
107 
            src={image}
108 
            alt={`${title} profile image`}
656 stevensc 109 
            sx={{ width: '50px', height: '50px' }}
534 stevensc 110 
          />
111 
        )}
714 stevensc 112 
        <HeaderContent>
1161 stevensc 113 
          <h2 onClick={goToProfile}>{title}</h2>
114 
 
714 stevensc 115 
          {timeElapsed && <span>{timeElapsed}</span>}
116 
        </HeaderContent>
534 stevensc 117 
      </HeaderInfo>
118 
      {children}
119 
    </LayoutHeader>
656 stevensc 120 
  )
121 
}
532 stevensc 122 
 
656 stevensc 123 
StyledContainer.Header = Header
531 stevensc 124 
 
656 stevensc 125 
export default StyledContainer