Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3679 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3719 stevensc 1 
import React from 'react';
2 
import { Link } from 'react-router-dom';
3 
import { Container, styled } from '@mui/material';
4 
 
5 
import { useFetch } from '@hooks';
6 
import colors from '@styles/config/colors';
7 
 
8 
const StyledFooter = styled('footer')(({ theme }) => ({
9 
  padding: '2rem 0',
10 
  [theme.breakpoints.down('md')]: {
11 
    display: 'none'
12 
  }
13 
}));
14 
 
15 
const StyledFooterContent = styled('div')(({ theme }) => ({
16 
  display: 'flex',
17 
  gap: '1rem',
18 
  alignItems: 'center',
19 
  justifyContent: 'center',
20 
  position: 'relative',
21 
  paddingLeft: '3rem',
22 
  width: '100%',
23 
  [theme.breakpoints.down('md')]: {
24 
    display: 'none'
25 
  },
26 
  '& > a': {
27 
    position: 'absolute',
28 
    top: '50%',
29 
    left: 0,
30 
    transform: 'translateY(-50%)',
31 
    '& img': {
32 
      width: '2.5rem',
33 
      height: '2.5rem'
34 
    }
35 
  },
36 
  '& ul': {
37 
    display: 'grid',
38 
    gridTemplateColumns: 'repeat(auto-fill, minmax(130px, 1fr))',
39 
    gap: '10px',
40 
    justifyContent: 'space-around',
41 
    '& li': {
42 
      display: 'inline-flex',
43 
      '& a': {
44 
        fontSize: '14px',
45 
        fontWeight: '600',
46 
        color: colors.font.primary
47 
      }
48 
    }
49 
  }
50 
}));
51 
 
52 
const StyledFooterMain = styled('div')(() => ({
53 
  display: 'inline-flex',
54 
  alignItems: 'center',
55 
  '& img': {
56 
    marginRight: '5px',
57 
    width: '1rem',
58 
    height: '1rem'
59 
  },
60 
  '& p': {
61 
    color: colors.font.secondary,
62 
    fontSize: '14px',
63 
    fontWeight: '500'
64 
  }
65 
}));
66 
 
67 
const StyledFooterLink = styled('div')(() => ({
68 
  display: 'flex',
69 
  flexDirection: 'column',
70 
  gap: '0.5rem',
71 
  alignItems: 'center',
72 
  '& ul': {
73 
    display: 'flex',
74 
    alignItems: 'center',
75 
    gap: '1rem',
76 
    flexWrap: 'wrap'
77 
  }
78 
}));
79 
 
80 
const Footer = () => {
81 
  const { data } = useFetch('/helpers/footer');
82 
 
83 
  return (
84 
    <StyledFooter>
85 
      <Container>
86 
        <StyledFooterContent>
87 
          <Link to='/'>
88 
            <img src='/images/logo-leaderslinked.png' alt='logo' />
89 
          </Link>
90 
 
91 
          <StyledFooterLink>
92 
            <ul>
93 
              {Object.entries(data).map(([href, label]) => (
94 
                <li key={`${href}-${label}`}>
95 
                  <Link to={href}>{label}</Link>
96 
                </li>
97 
              ))}
98 
            </ul>
99 
 
100 
            <StyledFooterMain>
101 
              <img src='/images/copy-icon2.png' alt='logo' />
102 
              <p>CESA MS Copyright 2023</p>
103 
            </StyledFooterMain>
104 
          </StyledFooterLink>
105 
        </StyledFooterContent>
106 
      </Container>
107 
    </StyledFooter>
108 
  );
109 
};
110 
 
111 
export default Footer;