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, Container, styled, Toolbar, Typography } from '@mui/material';
import Slider from 'react-slick';

import { parse } from '@utils';

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',
  height: '100%',
  [theme.breakpoints.up('md')]: {
    flexDirection: 'row'
  }
}));

const AuthSlider = styled(Slider)(({ theme }) => ({
  maxWidth: 'calc(100vw - 2rem)',
  '& img': {
    maxWidth: '300px !important',
    maxheight: '300px !important',
    display: 'block !important',
    margin: 'auto'
  },
  [theme.breakpoints.up('md')]: {
    display: 'none'
  }
}));

const AuthLayout = () => {
  const { logo_url, intro } = useSelector(({ auth }) => auth);
  const isRoot = useMatch('/');
  const userAgent = navigator.userAgent;
  const isIphone = /iPad|iPhone|iPod|Mac/.test(userAgent);

  return (
    <>
      <AppBar
        sx={{
          paddingTop: isIphone ? '50px' : '0',
          position: 'relative',
          backgroundColor: 'transparent',
          boxShadow: 'none'
        }}
      >
        <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>
        <AuthPage>
          <Section sx={{ display: { xs: 'none', md: 'flex' } }}>
            {isRoot && (
              <AuthSlider
                arrows={false}
                dots={true}
                slidesToShow={1}
                slidesToScroll={1}
                autoplay={true}
                autoplaySpeed={3000}
                infinite={true}
              >
                <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>
            )}

            <img src={logo_url} alt='Leaderslinked logo' />
            <Typography>{parse(intro)}</Typography>
          </Section>

          <Section>
            <Outlet />
          </Section>
        </AuthPage>
      </Container>
    </>
  );
};

export default AuthLayout;