Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { Link, Outlet, useMatch } from 'react-router-dom';

import { useSelector } from 'react-redux';

import { AppBar, Box, Button, Container, styled, Toolbar, Typography } from '@mui/material';

import Slider from 'react-slick';

import 'slick-carousel/slick/slick.css';

import 'slick-carousel/slick/slick-theme.css';

import { parse } from '@utils';

import { ArrowBackIos, ArrowForwardIos } from '@mui/icons-material';

const Section = styled('section')(({ theme }) => ({

  display: 'flex',

  flexDirection: 'column',

  gap: theme.spacing(0.5),

  justifyContent: 'center',

  alignItems: 'center',

  flex: 1,

  '& > img': {

    display: 'block',

    margin: '0 auto'

  }

}));

const AuthPage = styled('div')(({ theme }) => ({

  display: 'flex',

  flexDirection: 'column',

  gap: '1rem',

  justifyContent: 'center',

  alignItems: 'center',

  width: '100%',

  maxWidth: '100vw',

  overflow: 'hidden',

  padding: '0 1rem',

  [theme.breakpoints.up('md')]: {

    flexDirection: 'row',

    minHeight: 'calc(100vh - 120px)',

    justifyContent: 'space-between',

    alignItems: 'stretch',

    padding: '0'

  }

}));

const AuthSlider = styled(Slider)(({ theme }) => ({

  maxWidth: '100%',

  width: '100%',

  margin: '0 auto',

  marginBottom: theme.spacing(2),

  // Estilos para las imágenes del slider

  '& img': {

    maxWidth: '250px !important',

    maxHeight: '250px !important',

    display: 'block !important',

    margin: 'auto',

    borderRadius: '12px',

    objectFit: 'contain',

    transition: 'transform 0.3s ease',

    // Responsive para imágenes - iOS optimizado

    [theme.breakpoints.down('sm')]: {

      maxWidth: '200px !important',

      maxHeight: '200px !important'

    },

    // Para pantallas muy pequeñas de iPhone

    '@media (max-width: 390px)': {

      maxWidth: '180px !important',

      maxHeight: '180px !important'

    }

  },

  // Estilos para cada slide

  '& .slick-slide': {

    padding: '0 4px',

    textAlign: 'center',

    outline: 'none'

  },

  // Contenedor de cada slide

  '& .slick-slide > div': {

    outline: 'none',

    display: 'flex !important',

    flexDirection: 'column',

    alignItems: 'center',

    justifyContent: 'center'

  },

  // Estilos para los textos del slider

  '& .MuiTypography-root': {

    marginTop: theme.spacing(1.5),

    fontSize: '1rem',

    fontWeight: 600,

    color: theme.palette.text.primary,

    textAlign: 'center',

    lineHeight: 1.3,

    maxWidth: '250px',

    margin: `${theme.spacing(1.5)} auto 0`,

    // Responsive para textos

    [theme.breakpoints.down('sm')]: {

      fontSize: '0.95rem',

      marginTop: theme.spacing(1),

      maxWidth: '200px'

    },

    // Para pantallas muy pequeñas de iPhone

    '@media (max-width: 390px)': {

      fontSize: '0.9rem',

      marginTop: theme.spacing(0.5),

      maxWidth: '180px'

    }

  },

  // Estilos para los dots/puntos de navegación

  '& .slick-dots': {

    position: 'relative',

    bottom: 'auto',

    marginTop: theme.spacing(2),

    marginBottom: 0,

    '& li': {

      margin: '0 3px',

      '& button': {

        width: '10px',

        height: '10px',

        '&:before': {

          fontSize: '10px',

          color: theme.palette.primary.main,

          opacity: 0.4,

          width: '10px',

          height: '10px',

          lineHeight: '10px'

        }

      },

      '&.slick-active button:before': {

        opacity: 1,

        color: theme.palette.primary.main,

        transform: 'scale(1.3)'

      }

    }

  },

  // Estilos para transiciones

  '& .slick-track': {

    display: 'flex',

    alignItems: 'center'

  },

  // Lista del slider

  '& .slick-list': {

    overflow: 'hidden',

    borderRadius: '8px'

  },

  // Ocultar en pantallas medianas y grandes

  [theme.breakpoints.up('md')]: {

    display: 'none'

  }

}));

const AuthLayout = () => {

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

  const isRoot = useMatch('/');

  return (

    <>

      <AppBar

        sx={{

          position: 'relative',

          backgroundColor: 'transparent',

          boxShadow: 'none',

          zIndex: 1

        }}

      >

        <Container>

          <Toolbar

            sx={{

              minHeight: 'none',

              padding: 0,

              '& img': {

                display: { md: 'none' }

              }

            }}

          >

            <Link to='/'>

              <img src={logo_url} alt='Logo' width={50} />

            </Link>

          </Toolbar>

        </Container>

      </AppBar>

      <Container

        sx={{

          display: 'flex',

          alignItems: 'center',

          justifyContent: 'center',

          maxWidth: '100vw',

          overflow: 'hidden',

          padding: { xs: '0 1rem', md: '0' }

        }}

      >

        <AuthPage>

          <Section

            sx={{

              display: { xs: isRoot ? 'flex' : 'none', md: 'flex' }

            }}

          >

            <Box

              sx={{

                display: { xs: 'flex', md: 'none' },

                flexDirection: 'column',

                gap: '1rem',

                alignItems: 'center',

                justifyContent: 'center',

                width: '100%',

                maxWidth: '400px',

                padding: '1rem'

              }}

            >

              {isRoot && (

                <AuthSlider

                  autoplay={true}

                  infinite={true}

                  pauseOnHover={true}

                  pauseOnFocus={true}

                  dots={true}

                  arrows={false}

                  accessibility={true}

                  nextArrow={<ArrowForwardIos />}

                  prevArrow={<ArrowBackIos />}

                >

                  <Box>

                    <img src='/images/intro_slide_1.png' alt='image slide' />

                    <Typography>Desarrollate en Líder moderno</Typography>

                  </Box>

                  <Box>

                    <img src='/images/intro_slide_2.png' alt='image slide' />

                    <Typography>Evoluciona día a día</Typography>

                  </Box>

                  <Box>

                    <img src='/images/intro_slide_3.png' alt='image slide' />

                    <Typography>Construye tu futuro</Typography>

                  </Box>

                </AuthSlider>

              )}

              <Button

                variant='contained'

                color='primary'

                fullWidth

                LinkComponent={Link}

                to='/signin'

              >

                Iniciar sesión

              </Button>

              <Button

                variant='contained'

                color='primary'

                fullWidth

                LinkComponent={Link}

                to='/forgot-password'

              >

                Olvidé mi contraseña

              </Button>

            </Box>

            <Box

              sx={{

                display: { xs: isRoot ? 'none' : 'flex', md: 'flex' },

                alignItems: 'center',

                justifyContent: 'center',

                flexDirection: 'column',

                gap: '1rem'

              }}

            >

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

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

            </Box>

          </Section>

          <Section

            sx={{

              display: { xs: isRoot ? 'none' : 'flex', md: 'flex' }

            }}

          >

            <Outlet />

          </Section>

        </AuthPage>

      </Container>

    </>

  );

};

export default AuthLayout;