Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3206 | Rev 3257 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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