Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2777 | Rev 3588 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2777 Rev 3585
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react';
2 
import { Link } from 'react-router-dom'
 2 
import { Link } from 'react-router-dom';
3 
import { Container } from '@mui/material'
 3 
import { Container, styled } from '@mui/material';
4 
 
 4 
 
5 
import { useFetch } from '@hooks'
 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 
`;
6 
 
 14 
 
7 
import styles from './Footer.module.scss'
 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 
`;
Línea 8... Línea 76...
8 
 
 76 
 
9 
const Footer = () => {
 77 
const Footer = () => {
Línea 10... Línea 78...
10 
  const { data } = useFetch('/helpers/footer')
 78 
  const { data } = useFetch('/helpers/footer');
11 
 
 79 
 
12 
  return (
 80 
  return (
13 
    <footer className={styles.footer}>
 81 
    <StyledFooter>
14 
      <Container>
 82 
      <Container>
15 
        <div className={styles.footer_content}>
 83 
        <StyledFooterContent>
16 
          <Link to='/'>
 84 
          <Link to='/'>
Línea 17... Línea 85...
17 
            <img src='/images/logo-leaderslinked.png' alt='logo' />
 85 
            <img src='/images/logo-leaderslinked.png' alt='logo' />
18 
          </Link>
 86 
          </Link>
19 
 
 87 
 
20 
          <div className={styles.footer__link}>
 88 
          <StyledFooterLink>
21 
            <ul>
 89 
            <ul>
22 
              {Object.entries(data).map(([href, label]) => (
 90 
              {Object.entries(data).map(([href, label]) => (
23 
                <li key={`${href}-${label}`}>
 91 
                <li key={`${href}-${label}`}>
24 
                  <Link to={href}>{label}</Link>
 92 
                  <Link to={href}>{label}</Link>
Línea 25... Línea 93...
25 
                </li>
 93 
                </li>
26 
              ))}
 94 
              ))}
27 
            </ul>
 95 
            </ul>
28 
 
 96 
 
29 
            <div className={styles.footer__main}>
 97 
            <StyledFooterMain>
30 
              <img src='/images/copy-icon2.png' alt='logo' />
 98 
              <img src='/images/copy-icon2.png' alt='logo' />
31 
              <p>CESA MS Copyright 2023</p>
 99 
              <p>CESA MS Copyright 2023</p>
32 
            </div>
 100 
            </StyledFooterMain>
33 
          </div>
 101 
          </StyledFooterLink>
34 
        </div>
 102 
        </StyledFooterContent>
Línea 35... Línea 103...
35 
      </Container>
 103 
      </Container>