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