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 || !data) 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>

    </>

  );

}