Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6865 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6837 stevensc 1 
import React from 'react'
2 
import { styled } from 'styled-components'
6865 stevensc 3 
import { useLocation, useParams } from 'react-router-dom'
6837 stevensc 4 
import parse from 'html-react-parser'
5 
 
6 
import Avatar from '../../UI/AvatarImage'
7 
import StatItem from './StatItem'
8 
 
9 
const InfoWidget = styled.div`
10 
  align-items: center;
11 
  background-color: #fff;
12 
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
13 
  gap: 0.5rem;
14 
  display: flex;
15 
  flex-direction: column;
16 
  padding-top: ${(props) => (props.cover ? 0 : '10px')};
17 
  overflow: hidden;
18 
 
19 
  p,
20 
  h1 {
21 
    font-size: 0.9rem;
22 
    padding: 0 1rem;
23 
  }
24 
 
25 
  h2,
26 
  h1 {
27 
    padding: 0 1rem;
28 
    text-align: center;
29 
  }
30 
 
31 
  @media (min-width: 576px) {
32 
    border-radius: 10px;
33 
  }
34 
`
35 
 
36 
const InfoCover = styled.img`
37 
  width: 100%;
38 
  height: 60px;
39 
  object-fit: cover;
40 
  margin-bottom: -20px;
41 
`
42 
 
43 
const GroupInfo = ({
44 
  cover = '',
45 
  image = '',
46 
  name = '',
47 
  overview = '',
48 
  totalMembers = '',
49 
  groupType = '',
50 
  accessibility = '',
51 
}) => {
6865 stevensc 52 
  const { uuid } = useParams()
6837 stevensc 53 
  const { pathname } = useLocation()
54 
  const type = pathname.split('/')[1]
55 
 
56 
  return (
57 
    <InfoWidget cover={cover}>
58 
      {cover && (
59 
        <InfoCover
6891 stevensc 60 
          src={`/storage/type/${type}-cover/code/${uuid}${
61 
            cover ? `/filename/${cover}` : '/'
62 
          }`}
6837 stevensc 63 
          alt="Profile cover"
64 
        />
65 
      )}
66 
      <Avatar
6891 stevensc 67 
        imageUrl={`/storage/type/${type}/code/${uuid}${
68 
          image ? `/filename/${image}` : '/'
69 
        }`}
6837 stevensc 70 
        name={name}
71 
        size="xl"
72 
      />
73 
      {name && <h2>{parse(name)}</h2>}
74 
      <p>{`${groupType} - ${accessibility}`}</p>
75 
      {overview && parse(overview)}
76 
      <StatItem title="Número de miembros" number={totalMembers} />
77 
    </InfoWidget>
78 
  )
79 
}
80 
 
81 
export default GroupInfo