Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { useNavigate } from 'react-router-dom';

import { Avatar, Button, styled, Typography } from '@mui/material';

import { useSelector } from 'react-redux';

import parse from 'html-react-parser';

import Widget from '@components/UI/Widget';

const WidgetButton = styled(Button)(() => ({

  borderRadius: 0,

  display: 'flex',

  justifyContent: 'space-between',

  width: '100%',

  '& span': {

    color: '#0a66c2'

  }

}));

const UserProfileAvatar = styled(Avatar)(() => ({

  width: '60px',

  height: '60px',

  margin: 'auto'

}));

const UserProfileCard = ({

  user: { cover = '', image = '', fullname = '', description = '', visits = 0, connections = 0 }

}) => {

  const labels = useSelector(({ intl }) => intl.labels);

  const navigate = useNavigate();

  const handleNavigate = (path) => navigate(path);

  return (

    <Widget>

      <Widget.Media

        src={cover}

        alt={`${fullname} profile cover`}

        height={60}

        styles={{

          display: cover ? 'block' : 'none',

          marginBottom: cover ? '-20px' : '0px'

        }}

      />

      <Widget.Body styles={{ textAlign: 'center' }}>

        <UserProfileAvatar src={image} alt={`${fullname} profile image`} />

        <Typography variant='h2'>{fullname}</Typography>

        {parse(description ?? '')}

      </Widget.Body>

      <WidgetButton onClick={() => handleNavigate('/profile/people-viewed-profile')}>

        {labels.who_has_seen_my_profile}

        <Typography variant='overline'>{visits ?? 0}</Typography>

      </WidgetButton>

      <WidgetButton onClick={() => handleNavigate('/connection/my-connections')}>

        {labels.connections}

        <Typography variant='overline'>{connections ?? 0}</Typography>

      </WidgetButton>

    </Widget>

  );

};

export default UserProfileCard;