Proyectos de Subversion LeadersLinked - SPA

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

import { useFetch } from '@shared/hooks';
import { Spinner } from '@shared/components';
import { DetailTag } from '@microlearning/components';

export function ProfilePage() {
  const { data, loading } = useFetch('/microlearning/profile');

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