Commit b3750ad4 authored by Omar Luna Hernández's avatar Omar Luna Hernández
Browse files

Se crea el footer y sus estilos

parent 2c3ec779
Loading
Loading
Loading
Loading
+39 −0
Original line number Diff line number Diff line
.footer{
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  padding: 1em;
}

.footer_license ,
.footer_developers{
  display: flex;
  flex-direction: column;
}

.footer_license{
  margin-top: auto;
}

.footer_credits{
  height: 100%;
}

.footer_icons{
  height: 50%;
  margin-left: auto;
}

.footer_images{
  height: 100%;
  display: flex;
  align-items: center;
}

.footer_images img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}
 No newline at end of file
+70 −0
Original line number Diff line number Diff line
import './assets/css/styles.css';

interface Developer{
  name: string;
  lastName: string;
  role: string;
  linkedInURL: string;
}

export const Footer = () => {
  const style: React.CSSProperties = {
    fontSize: 11, 
    textDecoration: 'none', 
    color: 'black',
    textAlign: 'left'
  }

  const developers: Developer[] = [
    {
      name: 'Lorenzo',
      lastName: 'Trujillo',
      role: 'Desarrollador FrontEnd Mobile',
      linkedInURL: 'https://www.linkedin.com/in/lorenzotrujillorojassd/'
    },
    {
      name: 'Diego I.',
      lastName: 'Correa',
      role: 'Desarrollador BackEnd',
      linkedInURL: 'https://www.linkedin.com/in/diego-ivan-correa/'
    },
    {
      name: 'Omar',
      lastName: 'Luna',
      role: 'Desarrollador FrontEnd Web',
      linkedInURL: 'https://www.linkedin.com/in/omar-luna-hern%C3%A1ndez-a280ba267/'
    }
  ]

  return (
    <div className="footer">
      <div className='footer_credits'>
        <div className='footer_license'>
          <div style={style}>
            ©2024
            <a href='https://labsol.cozcyt.gob.mx/' style={style}> Labsol Network.</a>
          </div>
          <a href='https://www.gnu.org/licenses/gpl-3.0.html' style={style}>Bajo licencia GPL v.3.</a>
        </div>
        <div className='footer_developers'>
          {
            developers.map((dev) => {
              return (
                <a style={style} href={dev.linkedInURL}>@ {dev.name + ' ' + dev.lastName + ' (' + dev.role +')'}</a>
              );
            })
          }
        </div>
      </div>

      <div className='footer_icons'>
        <div className='footer_images'>
          <img src='https://sit.cozcyt.gob.mx/static/images/sit_logo_texto_lab.png?v=2' 
            title="Laboratorio de Software Libre Network"/>
          <img src='https://sit.cozcyt.gob.mx/static/images/sit_logo_licencia.png?v=2' 
            title='GNU General Public License v.3.'/>
        </div>
      </div>
    </div>
  );
}
 No newline at end of file