Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3593 | Rev 3596 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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