Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'

import parse from 'html-react-parser'

import styled from 'styled-components'

import { Container, Col } from 'react-bootstrap'

import { NavLink } from 'react-router-dom'

import { useSelector } from 'react-redux'

const AuthContainer = styled(Container)`

  margin: auto;

  display: flex;

  padding: 2rem 0;

  @media (max-width: 768px) {

    flex-direction: column;

  }

`

const CompanyInfoContainer = styled(Col)`

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 0.5rem;

  img {

    height: 50vh;

    object-fit: contain;

    width: 100%;

  }

  p {

    font-size: 1rem;

  }

  @media (min-width: 768px) {

    img {

      margin: 0 3rem;

    }

  }

`

const AuthLayout = ({ children }) => {

  const { logo_url, intro } = useSelector(({ auth }) => auth)

  return (

    <AuthContainer forwardedAs="main">

      <CompanyInfoContainer forwardedAs="section" lg="6">

        <img src={logo_url} alt="Leaderslinked logo" />

        <p>{parse(intro)}</p>

      </CompanyInfoContainer>

      <Col forwardedAs="section">

        <ul className="sign-control">

          <li>

            <NavLink to="/signin" activeClassName="current">

              Entrar

            </NavLink>

          </li>

          <li>

            <NavLink to="/signup" activeClassName="current">

              Registrarse

            </NavLink>

          </li>

          <li>

            <NavLink to="/forgot-password" activeClassName="current">

              Olvide mi clave

            </NavLink>

          </li>

        </ul>

        <div className="sign_in_sec current">{children}</div>

      </Col>

    </AuthContainer>

  )

}

export default AuthLayout