Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 714 | Rev 899 | 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;
656 stevensc 64 
  & > button,
65 
  & > a {
531 stevensc 66 
    align-items: center;
67 
    border-radius: var(--border-radius);
68 
    cursor: pointer;
69 
    display: inline-flex;
70 
    flex-direction: column;
71 
    font-size: 0.9rem;
72 
    padding: 5px;
73 
    position: relative;
74 
    &:hover {
75 
      background-color: whitesmoke;
76 
    }
77 
    @media ${device.tablet} {
78 
      flex-direction: row;
79 
      gap: 0.5rem;
80 
      font-size: 1rem;
81 
    }
82 
  }
656 stevensc 83 
`
531 stevensc 84 
 
85 
const StyledContainer = ({ children, ...rest }) => {
656 stevensc 86 
  return <LayoutContainer {...rest}>{children}</LayoutContainer>
87 
}
5 stevensc 88 
 
531 stevensc 89 
const Actions = ({ children, ...rest }) => {
656 stevensc 90 
  return <LayoutActions {...rest}>{children}</LayoutActions>
91 
}
531 stevensc 92 
 
535 stevensc 93 
const Body = ({ children, ...rest }) => {
656 stevensc 94 
  return <LayoutBody {...rest}>{children}</LayoutBody>
95 
}
535 stevensc 96 
 
714 stevensc 97 
const Header = ({
98 
  image = '',
99 
  title = '',
100 
  url = '',
101 
  timeElapsed = '',
102 
  children,
103 
  ...rest
104 
}) => {
534 stevensc 105 
  return (
106 
    <LayoutHeader {...rest}>
107 
      <HeaderInfo>
108 
        {image && (
109 
          <Avatar
110 
            src={image}
111 
            alt={`${title} profile image`}
656 stevensc 112 
            sx={{ width: '50px', height: '50px' }}
534 stevensc 113 
          />
114 
        )}
714 stevensc 115 
        <HeaderContent>
116 
          {url ? (
117 
            <Link to={url}>
118 
              <h2>{title}</h2>
119 
            </Link>
120 
          ) : (
614 stevensc 121 
            <h2>{title}</h2>
714 stevensc 122 
          )}
123 
          {timeElapsed && <span>{timeElapsed}</span>}
124 
        </HeaderContent>
534 stevensc 125 
      </HeaderInfo>
126 
      {children}
127 
    </LayoutHeader>
656 stevensc 128 
  )
129 
}
532 stevensc 130 
 
656 stevensc 131 
StyledContainer.Actions = Actions
132 
StyledContainer.Header = Header
133 
StyledContainer.Body = Body
531 stevensc 134 
 
656 stevensc 135 
export default StyledContainer