Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3257 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3719 stevensc 1 
import React from 'react';
2 
import { Link, Outlet, useMatch } from 'react-router-dom';
3 
import { useSelector } from 'react-redux';
4 
import { AppBar, Box, Container, styled, Toolbar, Typography } from '@mui/material';
5 
import Slider from 'react-slick';
6 
 
7 
import { parse } from '@utils';
8 
 
9 
const Section = styled('section')(({ theme }) => ({
10 
  display: 'flex',
11 
  flexDirection: 'column',
12 
  gap: theme.spacing(0.5),
13 
  justifyContent: 'center',
14 
  alignItems: 'center',
15 
  flex: 1,
16 
  '& > img': {
17 
    display: 'block',
18 
    margin: '0 auto'
19 
  }
20 
}));
21 
 
22 
const AuthPage = styled('div')(({ theme }) => ({
23 
  display: 'flex',
24 
  flexDirection: 'column',
25 
  gap: '1rem',
26 
  height: '100%',
27 
  [theme.breakpoints.up('md')]: {
28 
    flexDirection: 'row'
29 
  }
30 
}));
31 
 
32 
const AuthSlider = styled(Slider)(({ theme }) => ({
33 
  maxWidth: 'calc(100vw - 2rem)',
34 
  '& img': {
35 
    maxWidth: '300px !important',
36 
    maxheight: '300px !important',
37 
    display: 'block !important',
38 
    margin: 'auto'
39 
  },
40 
  [theme.breakpoints.up('md')]: {
41 
    display: 'none'
42 
  }
43 
}));
44 
 
45 
const AuthLayout = () => {
46 
  const { logo_url, intro } = useSelector(({ auth }) => auth);
47 
  const isRoot = useMatch('/');
48 
  const userAgent = navigator.userAgent;
49 
  const isIphone = /iPad|iPhone|iPod|Mac/.test(userAgent);
50 
 
51 
  return (
52 
    <>
53 
      <AppBar
54 
        sx={{
55 
          paddingTop: isIphone ? '50px' : '0',
56 
          position: 'relative',
57 
          backgroundColor: 'transparent',
58 
          boxShadow: 'none'
59 
        }}
60 
      >
61 
        <Container>
62 
          <Toolbar
63 
            sx={{
64 
              minHeight: 'none',
65 
              padding: 0,
66 
              '& img': {
67 
                display: { md: 'none' }
68 
              }
69 
            }}
70 
          >
71 
            <Link to='/'>
72 
              <img src={logo_url} alt='Logo' width={50} />
73 
            </Link>
74 
          </Toolbar>
75 
        </Container>
76 
      </AppBar>
77 
 
78 
      <Container>
79 
        <AuthPage>
80 
          <Section sx={{ display: { xs: 'none', md: 'flex' } }}>
81 
            {isRoot && (
82 
              <AuthSlider
83 
                arrows={false}
84 
                dots={true}
85 
                slidesToShow={1}
86 
                slidesToScroll={1}
87 
                autoplay={true}
88 
                autoplaySpeed={3000}
89 
                infinite={true}
90 
              >
91 
                <Box>
92 
                  <img src='/images/intro_slide_1.png' alt='image slide' />
93 
                  <Typography>Desarrollate en Líder moderno</Typography>
94 
                </Box>
95 
 
96 
                <Box>
97 
                  <img src='/images/intro_slide_2.png' alt='image slide' />
98 
                  <Typography>Evoluciona día a día</Typography>
99 
                </Box>
100 
 
101 
                <Box>
102 
                  <img src='/images/intro_slide_3.png' alt='image slide' />
103 
                  <Typography>Construye tu futuro</Typography>
104 
                </Box>
105 
              </AuthSlider>
106 
            )}
107 
 
108 
            <img src={logo_url} alt='Leaderslinked logo' />
109 
            <Typography>{parse(intro)}</Typography>
110 
          </Section>
111 
 
112 
          <Section>
113 
            <Outlet />
114 
          </Section>
115 
        </AuthPage>
116 
      </Container>
117 
    </>
118 
  );
119 
};
120 
 
121 
export default AuthLayout;