Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Link } from 'react-router-dom';
import { Container, styled } from '@mui/material';

import { useFetch } from '@hooks';
import colors from '@styles/config/colors';

const StyledFooter = styled('footer')(({ theme }) => ({
  padding: '2rem 0',
  [theme.breakpoints.down('md')]: {
    display: 'none'
  }
}));

const StyledFooterContent = styled('div')(({ theme }) => ({
  display: 'flex',
  gap: '1rem',
  alignItems: 'center',
  justifyContent: 'center',
  position: 'relative',
  paddingLeft: '3rem',
  width: '100%',
  [theme.breakpoints.down('md')]: {
    display: 'none'
  },
  '& > a': {
    position: 'absolute',
    top: '50%',
    left: 0,
    transform: 'translateY(-50%)',
    '& img': {
      width: '2.5rem',
      height: '2.5rem'
    }
  },
  '& ul': {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fill, minmax(130px, 1fr))',
    gap: '10px',
    justifyContent: 'space-around',
    '& li': {
      display: 'inline-flex',
      '& a': {
        fontSize: '14px',
        fontWeight: '600',
        color: colors.font.primary
      }
    }
  }
}));

const StyledFooterMain = styled('div')(() => ({
  display: 'inline-flex',
  alignItems: 'center',
  '& img': {
    marginRight: '5px',
    width: '1rem',
    height: '1rem'
  },
  '& p': {
    color: colors.font.secondary,
    fontSize: '14px',
    fontWeight: '500'
  }
}));

const StyledFooterLink = styled('div')(() => ({
  display: 'flex',
  flexDirection: 'column',
  gap: '0.5rem',
  alignItems: 'center',
  '& ul': {
    display: 'flex',
    alignItems: 'center',
    gap: '1rem',
    flexWrap: 'wrap'
  }
}));

const Footer = () => {
  const { data } = useFetch('/helpers/footer');

  return (
    <StyledFooter>
      <Container>
        <StyledFooterContent>
          <Link to='/'>
            <img src='/images/logo-leaderslinked.png' alt='logo' />
          </Link>

          <StyledFooterLink>
            <ul>
              {Object.entries(data).map(([href, label]) => (
                <li key={`${href}-${label}`}>
                  <Link to={href}>{label}</Link>
                </li>
              ))}
            </ul>

            <StyledFooterMain>
              <img src='/images/copy-icon2.png' alt='logo' />
              <p>CESA MS Copyright 2023</p>
            </StyledFooterMain>
          </StyledFooterLink>
        </StyledFooterContent>
      </Container>
    </StyledFooter>
  );
};

export default Footer;