Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
7002 stevensc 1 
import React from 'react'
2 
import parse from 'html-react-parser'
3 
import { styled } from 'styled-components'
4 
import { Avatar } from '@mui/material'
5 
import { Link } from 'react-router-dom'
7005 stevensc 6 
import VisibilityIcon from '@mui/icons-material/Visibility'
7 
import GroupIcon from '@mui/icons-material/Group'
8 
import ShareIcon from '@mui/icons-material/Share'
7002 stevensc 9 
 
10 
const StyledEntity = styled.article`
7004 stevensc 11 
  background-color: var(--bg-color);
12 
  border-radius: var(--border-radius);
13 
  box-shadow: var(--light-shadow);
7002 stevensc 14 
  display: flex;
15 
  flex-direction: column;
7004 stevensc 16 
  gap: 0.5rem;
7002 stevensc 17 
  padding: 1rem;
7004 stevensc 18 
  position: relative;
7002 stevensc 19 
  width: 100%;
7004 stevensc 20 
`
21 
 
22 
const EntityHeader = styled.div`
23 
  align-items: center;
24 
  display: flex;
7002 stevensc 25 
  gap: 0.5rem;
26 
`
27 
 
7004 stevensc 28 
const EntityInfo = styled.div`
29 
  align-items: center;
30 
  display: flex;
31 
  flex-direction: column;
32 
`
33 
 
34 
const EntityStats = styled.div`
35 
  align-items: center;
36 
  display: flex;
37 
  gap: 0.5rem;
38 
  position: absolute;
39 
  right: 0.5rem;
40 
  top: 0.5rem;
41 
`
42 
 
7002 stevensc 43 
const SearchItem = ({
44 
  name,
45 
  industry,
46 
  description,
47 
  skills,
48 
  common_connection,
49 
  views,
50 
  image,
51 
  company_name,
52 
  title,
53 
  url,
54 
  followers,
55 
  company_size,
56 
  view_common_connection,
57 
}) => {
58 
  return (
59 
    <StyledEntity>
7004 stevensc 60 
      <EntityHeader>
61 
        <Avatar src={image} sx={{ width: '80px', height: '80px' }} />
62 
        <EntityInfo>
63 
          <Link to={url}>
64 
            <h3>{title || name}</h3>
65 
          </Link>
66 
          {company_name && <h4>{company_name}</h4>}
67 
          {company_size && <p>Empresa {company_size} </p>}
68 
          {industry && <p>{industry}</p>}
69 
        </EntityInfo>
70 
      </EntityHeader>
7002 stevensc 71 
 
7004 stevensc 72 
      <EntityStats>
7002 stevensc 73 
        <ul>
7005 stevensc 74 
          {!company_name && !!common_connection && (
7002 stevensc 75 
            <li>
7005 stevensc 76 
              <p>
77 
                <ShareIcon />
7002 stevensc 78 
                {view_common_connection && (
79 
                  <small className="ml-2">{common_connection} comunes</small>
80 
                )}
81 
              </p>
82 
            </li>
83 
          )}
7007 stevensc 84 
          {!!followers && (
7002 stevensc 85 
            <li>
7005 stevensc 86 
              <p>
87 
                <GroupIcon />
7002 stevensc 88 
                <small className="ml-2">{followers}</small>
89 
              </p>
90 
            </li>
91 
          )}
7007 stevensc 92 
          {!!views && (
7002 stevensc 93 
            <li>
7005 stevensc 94 
              <p>
95 
                <VisibilityIcon />
7002 stevensc 96 
                <small className="ml-2">{views}</small>
97 
              </p>
98 
            </li>
99 
          )}
100 
        </ul>
7004 stevensc 101 
      </EntityStats>
7002 stevensc 102 
 
7004 stevensc 103 
      {description && parse(description)}
104 
      {skills && (
105 
        <ul className="skill-tags">
106 
          {Object.values(skills).map((skill, id) => (
107 
            <li key={id}>
108 
              <button title={skill} className="btn btn-tertiary">
109 
                {skill}
110 
              </button>
111 
            </li>
112 
          ))}
113 
        </ul>
114 
      )}
7002 stevensc 115 
    </StyledEntity>
116 
  )
117 
}
118 
 
119 
export default SearchItem