Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3203 | Rev 3205 | 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',
33 
  [theme.breakpoints.up('md')]: {
34 
    flexDirection: 'row'
35 
  }
36 
}))
37 
 
38 
const AuthSlider = styled(Slider)(({ theme }) => ({
39 
  maxWidth: 'calc(100vw - 2rem)',
40 
  '& img': {
41 
    maxWidth: '300px !important',
42 
    maxheight: '300px !important',
43 
    display: 'block !important',
44 
    margin: 'auto'
45 
  },
46 
  [theme.breakpoints.up('md')]: {
47 
    display: 'none'
48 
  }
49 
}))
50 
 
51 
const AuthLayout = () => {
52 
  const { logo_url, intro } = useSelector(({ auth }) => auth)
53 
  const isRoot = useMatch('/')
54 
  const userAgent = navigator.userAgent
55 
  const isIphone = /iPad|iPhone|iPod|Mac/.test(userAgent)
56 
 
57 
  return (
58 
    <>
59 
      <AppBar
60 
        sx={{
61 
          paddingTop: isIphone ? '50px' : '0',
62 
          position: 'relative',
63 
          backgroundColor: 'transparent',
64 
          boxShadow: 'none'
65 
        }}
66 
      >
3203 stevensc 67 
        <Container>
3202 stevensc 68 
          <Toolbar
69 
            sx={{
70 
              minHeight: 'none',
71 
              '& img': {
72 
                display: { md: 'none' }
73 
              }
74 
            }}
75 
          >
3201 stevensc 76 
            <Link to='/'>
77 
              <img src={logo_url} alt='Logo' width={50} />
78 
            </Link>
79 
          </Toolbar>
80 
        </Container>
81 
      </AppBar>
82 
 
3203 stevensc 83 
      <Container
84 
        sx={{
85 
          minHeight: 'calc(100vh - 65px - 129px)',
86 
          marginTop: ({ spacing }) => spacing(1)
87 
        }}
88 
      >
3201 stevensc 89 
        <AuthPage>
3204 stevensc 90 
          <Section sx={{ display: { xs: 'none', md: 'flex' } }}>
3201 stevensc 91 
            <img src={logo_url} alt='Leaderslinked logo' />
92 
            <Typography>{parse(intro)}</Typography>
93 
          </Section>
94 
 
95 
          <Section>
96 
            <Outlet />
97 
          </Section>
98 
        </AuthPage>
99 
      </Container>
100 
    </>
101 
  )
102 
}
103 
 
104 
export default AuthLayout