Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

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

import { useMicroLearning, useFetch } from '@hooks';

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

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

const ProfilePage = () => {

  const { link_profile: linkProfile } = useMicroLearning();

  const { data, isLoading } = useFetch(linkProfile, []);

  if (isLoading) return <Spinner />;

  return (

    <>

      <Box textAlign='center'>

        <Avatar

          src={data[0]?.image}

          alt={data[0]?.name}

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

        />

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

      </Box>

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

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

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

        ))}

      </Box>

    </>

  );

};

export default ProfilePage;