Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 645 | Rev 714 | 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;
530 stevensc 11 
  width: -moz-available;
12 
  width: -webkit-fill-available;
13 
  width: fill-available;
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 
 
532 stevensc 33 
const LayoutHeader = styled.div`
34 
  display: flex;
35 
  gap: 0.5rem;
616 stevensc 36 
  padding: 10px 1rem;
532 stevensc 37 
  align-items: center;
537 stevensc 38 
  justify-content: space-between;
532 stevensc 39 
  position: relative;
656 stevensc 40 
`
532 stevensc 41 
 
535 stevensc 42 
const LayoutBody = styled.div`
616 stevensc 43 
  padding: 10px 1rem;
554 stevensc 44 
  display: flex;
45 
  flex-direction: column;
656 stevensc 46 
`
535 stevensc 47 
 
534 stevensc 48 
const HeaderInfo = styled.div`
49 
  align-items: center;
50 
  display: inline-flex;
51 
  gap: 0.5rem;
52 
  width: fit-content;
656 stevensc 53 
`
534 stevensc 54 
 
531 stevensc 55 
const LayoutActions = styled.div`
56 
  display: flex;
532 stevensc 57 
  justify-content: space-around;
531 stevensc 58 
  border-top: 1px solid rgb(211, 211, 211);
645 stevensc 59 
  padding: 5px;
656 stevensc 60 
  & > button,
61 
  & > a {
531 stevensc 62 
    align-items: center;
63 
    border-radius: var(--border-radius);
64 
    cursor: pointer;
65 
    display: inline-flex;
66 
    flex-direction: column;
67 
    font-size: 0.9rem;
68 
    padding: 5px;
69 
    position: relative;
70 
    &:hover {
71 
      background-color: whitesmoke;
72 
    }
73 
    @media ${device.tablet} {
74 
      flex-direction: row;
75 
      gap: 0.5rem;
76 
      font-size: 1rem;
77 
    }
78 
  }
656 stevensc 79 
`
531 stevensc 80 
 
81 
const StyledContainer = ({ children, ...rest }) => {
656 stevensc 82 
  return <LayoutContainer {...rest}>{children}</LayoutContainer>
83 
}
5 stevensc 84 
 
531 stevensc 85 
const Actions = ({ children, ...rest }) => {
656 stevensc 86 
  return <LayoutActions {...rest}>{children}</LayoutActions>
87 
}
531 stevensc 88 
 
535 stevensc 89 
const Body = ({ children, ...rest }) => {
656 stevensc 90 
  return <LayoutBody {...rest}>{children}</LayoutBody>
91 
}
535 stevensc 92 
 
656 stevensc 93 
const Header = ({ image = '', title = '', url = '', children, ...rest }) => {
534 stevensc 94 
  return (
95 
    <LayoutHeader {...rest}>
96 
      <HeaderInfo>
97 
        {image && (
98 
          <Avatar
99 
            src={image}
100 
            alt={`${title} profile image`}
656 stevensc 101 
            sx={{ width: '50px', height: '50px' }}
534 stevensc 102 
          />
103 
        )}
639 stevensc 104 
        {url ? (
614 stevensc 105 
          <Link to={url}>
106 
            <h2>{title}</h2>
107 
          </Link>
639 stevensc 108 
        ) : (
109 
          <h2>{title}</h2>
110 
        )}
534 stevensc 111 
      </HeaderInfo>
112 
      {children}
113 
    </LayoutHeader>
656 stevensc 114 
  )
115 
}
532 stevensc 116 
 
656 stevensc 117 
StyledContainer.Actions = Actions
118 
StyledContainer.Header = Header
119 
StyledContainer.Body = Body
531 stevensc 120 
 
656 stevensc 121 
export default StyledContainer