Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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