Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

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

import { useAlert, useApi } from '@shared/hooks';

import { getProfile } from '@microlearning/services';

import { Spinner } from '@shared/components';

import { DetailTag } from '@microlearning/components';

export function ProfilePage() {

  const { showError } = useAlert();

  const { data: profile, loading } = useApi(getProfile, {

    autoFetch: true,

    onError: (error) => {

      showError(error.message);

    }

  });

  if (loading) return <Spinner />;

  return (

    <>

      <Box textAlign='center'>

        <Avatar

          src={profile[0]?.image}

          alt={profile[0]?.name}

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

        />

        <Typography variant='h2'>{profile[0]?.name}</Typography>

      </Box>

      <Box display='flex' flexDirection='column' gap={1} width='100%' mt={2}>

        {profile[0]?.details?.map(({ uuid, label, value }) => (

          <DetailTag key={uuid} title={label} label={value} />

        ))}

      </Box>

    </>

  );

}