Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

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

import VisibilityOutlined from '@mui/icons-material/VisibilityOutlined';

import MapOutlined from '@mui/icons-material/MapOutlined';

import ShareOutlined from '@mui/icons-material/ShareOutlined';

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

const Row = styled('div')(() => ({

  display: 'flex',

  justifyContent: 'space-around',

  alignItems: 'center'

}));

export default function ProfileInfo({ image, fullName, visits, country, connections }) {

  return (

    <Widget>

      <Widget.Body>

        <Avatar

          src={image}

          alt={`${fullName} profile-image`}

          sx={{ margin: '0 auto', width: 100, height: 100 }}

        />

        <Typography variant='h2' sx={{ textAlign: 'center' }}>

          {fullName}

        </Typography>

        <Row>

          <Typography variant='overline'>

            <VisibilityOutlined />

            {visits}

          </Typography>

          <Typography variant='overline'>

            <MapOutlined />

            {country}

          </Typography>

          <Typography variant='overline'>

            <ShareOutlined />

            {connections}

          </Typography>

        </Row>

      </Widget.Body>

    </Widget>

  );

}