Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3596 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3596 Rev 3719
Línea 1... Línea 1...
1 
import React from 'react';
 1 
import React from 'react';
2 
import { useNavigate } from 'react-router-dom';
 2 
import { useNavigate } from 'react-router-dom';
3 
import { Avatar, Button, styled, Typography } from '@mui/material';
 3 
import { Avatar, Button, styled, Typography } from '@mui/material';
4 
import { useSelector } from 'react-redux';
 4 
import { useSelector } from 'react-redux';
5 
import parse from 'html-react-parser';
 5 
import parse from 'html-react-parser';
6 
 
 - 
 
7 
import colors from '@styles/config/colors';
 - 
 
8 
 
 6 
 
9 
import Widget from '@components/UI/Widget';
 7 
import Widget from '@components/UI/Widget';
10 
 
 8 
 
11 
const WidgetButton = styled(Button)(() => ({
 9 
const WidgetButton = styled(Button)(() => ({
12 
  alignItems: 'center',
 - 
 
13 
  borderRadius: 0,
 10 
  borderRadius: 0,
14 
  color: colors.font.subtitle,
 - 
 
15 
  display: 'flex',
 11 
  display: 'flex',
16 
  fontWeight: 600,
 - 
 
17 
  justifyContent: 'space-between',
 12 
  justifyContent: 'space-between',
18 
  width: '100%',
 13 
  width: '100%',
19 
  '& span': {
 14 
  '& span': {
20 
    color: '#0a66c2'
 15 
    color: '#0a66c2'
21 
  }
 16 
  }
22 
}));
 17 
}));
23 
 
 18 
 
24 
const UserProfileAvatar = styled(Avatar)(() => ({
 19 
const UserProfileAvatar = styled(Avatar)(() => ({
25 
  width: '60px',
 20 
  width: '60px',
26 
  height: '60px',
 21 
  height: '60px',
27 
  margin: 'auto'
 22 
  margin: 'auto'
28 
}));
 23 
}));
29 
 
 24 
 
30 
const UserProfileCard = ({
 25 
const UserProfileCard = ({
31 
  user: { cover = '', image = '', fullname = '', description = '', visits = 0, connections = 0 }
 26 
  user: { cover = '', image = '', fullname = '', description = '', visits = 0, connections = 0 }
32 
}) => {
 27 
}) => {
33 
  const labels = useSelector(({ intl }) => intl.labels);
 28 
  const labels = useSelector(({ intl }) => intl.labels);
34 
  const navigate = useNavigate();
 29 
  const navigate = useNavigate();
35 
 
 30 
 
36 
  const handleNavigate = (path) => navigate(path);
 31 
  const handleNavigate = (path) => navigate(path);
37 
 
 32 
 
38 
  return (
 33 
  return (
39 
    <Widget>
 34 
    <Widget>
40 
      <Widget.Media
 35 
      <Widget.Media
41 
        src={cover}
 36 
        src={cover}
42 
        alt={`${fullname} profile cover`}
 37 
        alt={`${fullname} profile cover`}
43 
        height={60}
 38 
        height={60}
44 
        styles={{
 39 
        styles={{
45 
          display: cover ? 'block' : 'none',
 40 
          display: cover ? 'block' : 'none',
46 
          marginBottom: cover ? '-20px' : '0px'
 41 
          marginBottom: cover ? '-20px' : '0px'
47 
        }}
 42 
        }}
48 
      />
 43 
      />
49 
 
 44 
 
50 
      <Widget.Body styles={{ textAlign: 'center' }}>
 45 
      <Widget.Body styles={{ textAlign: 'center' }}>
51 
        <UserProfileAvatar src={image} alt={`${fullname} profile image`} />
 46 
        <UserProfileAvatar src={image} alt={`${fullname} profile image`} />
52 
        <Typography variant='h2'>{parse(fullname ?? '')}</Typography>
 47 
        <Typography variant='h2'>{fullname}</Typography>
53 
        <Typography>{parse(description ?? '')}</Typography>
 48 
        {parse(description ?? '')}
54 
      </Widget.Body>
 49 
      </Widget.Body>
55 
 
 50 
 
56 
      <WidgetButton onClick={() => handleNavigate('/profile/people-viewed-profile')}>
 51 
      <WidgetButton onClick={() => handleNavigate('/profile/people-viewed-profile')}>
57 
        {labels.who_has_seen_my_profile}
 52 
        {labels.who_has_seen_my_profile}
58 
        <Typography variant='overline'>{visits ?? 0}</Typography>
 53 
        <Typography variant='overline'>{visits ?? 0}</Typography>
59 
      </WidgetButton>
 54 
      </WidgetButton>
60 
 
 55 
 
61 
      <WidgetButton onClick={() => handleNavigate('/connection/my-connections')}>
 56 
      <WidgetButton onClick={() => handleNavigate('/connection/my-connections')}>
62 
        {labels.connections}
 57 
        {labels.connections}
63 
        <Typography variant='overline'>{connections ?? 0}</Typography>
 58 
        <Typography variant='overline'>{connections ?? 0}</Typography>
64 
      </WidgetButton>
 59 
      </WidgetButton>
65 
    </Widget>
 60 
    </Widget>
66 
  );
 61 
  );
67 
};
 62 
};
68 
 
 63 
 
69 
export default UserProfileCard;
 64 
export default UserProfileCard;