Proyectos de Subversion LeadersLinked - SPA

Rev

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