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';

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