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>
    </>
  );
}