updated the login buttons
This commit is contained in:
ArtChaos189
parent
203c8d5f93
commit
9defa6abce
@ -1,72 +1,86 @@
|
|||||||
import React from 'react';
|
import React from "react";
|
||||||
import Box from '@mui/material/Box';
|
import Box from "@mui/material/Box";
|
||||||
import Button from '@mui/material/Button';
|
import Button from "@mui/material/Button";
|
||||||
import SectionStyled from './SectionStyled';
|
import SectionStyled from "./SectionStyled";
|
||||||
import NavMenuItem from "@ui_kit/Header/NavMenuItem";
|
import NavMenuItem from "@ui_kit/Header/NavMenuItem";
|
||||||
import QuizLogo from "./images/icons/QuizLogo";
|
import QuizLogo from "./images/icons/QuizLogo";
|
||||||
import { useMediaQuery, useTheme } from "@mui/material";
|
import { useMediaQuery, useTheme } from "@mui/material";
|
||||||
import { setIsContactFormOpen } from "../../stores/contactForm";
|
import { setIsContactFormOpen } from "../../stores/contactForm";
|
||||||
|
import { useUserStore } from "@root/user";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
const buttonMenu = ['Меню 1', 'Меню 2', 'Меню 3', 'Меню 4', 'Меню 5', 'Меню 1', 'Меню 2']
|
const buttonMenu = ["Меню 1", "Меню 2", "Меню 3", "Меню 4", "Меню 5", "Меню 1", "Меню 2"];
|
||||||
|
|
||||||
export default function Component() {
|
export default function Component() {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||||
const [select, setSelect] = React.useState(0)
|
const [select, setSelect] = React.useState(0);
|
||||||
return (
|
const userId = useUserStore((state) => state.userId);
|
||||||
<SectionStyled tag={'header'} bg={'#F2F3F7'} mwidth={'1160px'}
|
const navigate = useNavigate();
|
||||||
sxsect={{
|
|
||||||
minHeight: '80px',
|
|
||||||
borderBottom: '1px solid #E3E3E3',
|
|
||||||
position: "relative",
|
|
||||||
padding: isMobile ? "0 16px" : isTablet ? "0 40px" : 0,
|
|
||||||
zIndex: 3
|
|
||||||
}}
|
|
||||||
sxcont={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
padding: 0
|
|
||||||
}}>
|
|
||||||
<QuizLogo width={isMobile ? 100 : 150} />
|
|
||||||
{/*<Box*/}
|
|
||||||
{/* sx={{*/}
|
|
||||||
{/* maxWidth: '595px',*/}
|
|
||||||
{/* width: '100%',*/}
|
|
||||||
{/* display: 'flex',*/}
|
|
||||||
{/* justifyContent: 'space-between',*/}
|
|
||||||
{/* flexWrap: 'wrap',*/}
|
|
||||||
{/* marginRight: "138px",*/}
|
|
||||||
|
|
||||||
{/* }}*/}
|
const onClick = () => (userId ? navigate("/list") : setIsContactFormOpen(true));
|
||||||
{/*>*/}
|
|
||||||
{/* {buttonMenu.map( (element, index) => (*/}
|
return (
|
||||||
{/* <NavMenuItem*/}
|
<SectionStyled
|
||||||
{/* text={element}*/}
|
tag={"header"}
|
||||||
{/* // component={Link}*/}
|
bg={"#F2F3F7"}
|
||||||
{/* // to={url}*/}
|
mwidth={"1160px"}
|
||||||
{/* key={index}*/}
|
sxsect={{
|
||||||
{/* onClick={() => {*/}
|
minHeight: "80px",
|
||||||
{/* setSelect(index);*/}
|
borderBottom: "1px solid #E3E3E3",
|
||||||
{/* }}*/}
|
position: "relative",
|
||||||
{/* isActive={select === index}*/}
|
padding: isMobile ? "0 16px" : isTablet ? "0 40px" : 0,
|
||||||
{/* />*/}
|
zIndex: 3,
|
||||||
{/* ))}*/}
|
}}
|
||||||
{/*</Box>*/}
|
sxcont={{
|
||||||
<Button variant="outlined"
|
display: "flex",
|
||||||
onClick={() => setIsContactFormOpen(true)}
|
justifyContent: "space-between",
|
||||||
sx={{
|
alignItems: "center",
|
||||||
color: 'black',
|
padding: 0,
|
||||||
border: '1px solid black',
|
}}
|
||||||
textTransform: 'none',
|
>
|
||||||
fontWeight: '400',
|
<QuizLogo width={isMobile ? 100 : 150} />
|
||||||
fontSize: '18px',
|
{/*<Box*/}
|
||||||
lineHeight: '24px',
|
{/* sx={{*/}
|
||||||
borderRadius: '8px',
|
{/* maxWidth: '595px',*/}
|
||||||
padding: '8px 17px',
|
{/* width: '100%',*/}
|
||||||
}}
|
{/* display: 'flex',*/}
|
||||||
>Предрегистрация</Button>
|
{/* justifyContent: 'space-between',*/}
|
||||||
</SectionStyled>
|
{/* flexWrap: 'wrap',*/}
|
||||||
)
|
{/* marginRight: "138px",*/}
|
||||||
}
|
|
||||||
|
{/* }}*/}
|
||||||
|
{/*>*/}
|
||||||
|
{/* {buttonMenu.map( (element, index) => (*/}
|
||||||
|
{/* <NavMenuItem*/}
|
||||||
|
{/* text={element}*/}
|
||||||
|
{/* // component={Link}*/}
|
||||||
|
{/* // to={url}*/}
|
||||||
|
{/* key={index}*/}
|
||||||
|
{/* onClick={() => {*/}
|
||||||
|
{/* setSelect(index);*/}
|
||||||
|
{/* }}*/}
|
||||||
|
{/* isActive={select === index}*/}
|
||||||
|
{/* />*/}
|
||||||
|
{/* ))}*/}
|
||||||
|
{/*</Box>*/}
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={onClick}
|
||||||
|
sx={{
|
||||||
|
color: "black",
|
||||||
|
border: "1px solid black",
|
||||||
|
textTransform: "none",
|
||||||
|
fontWeight: "400",
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "24px",
|
||||||
|
borderRadius: "8px",
|
||||||
|
padding: "8px 17px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{userId ? "Войти" : " Регистрация / Войти"}
|
||||||
|
</Button>
|
||||||
|
</SectionStyled>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@ -1,75 +1,82 @@
|
|||||||
import React from 'react';
|
import React from "react";
|
||||||
import Box from '@mui/material/Box';
|
import Box from "@mui/material/Box";
|
||||||
import Button from '@mui/material/Button';
|
import Button from "@mui/material/Button";
|
||||||
import {Typography, useMediaQuery, useTheme} from "@mui/material";
|
import { Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||||
import abstraction from '../../assets/Quiz-main.png'
|
import abstraction from "../../assets/Quiz-main.png";
|
||||||
import SectionStyled from './SectionStyled';
|
import SectionStyled from "./SectionStyled";
|
||||||
import { Link, redirect } from 'react-router-dom';
|
import { Link, redirect, useNavigate } from "react-router-dom";
|
||||||
import {setIsContactFormOpen} from "@root/contactForm";
|
import { setIsContactFormOpen } from "@root/contactForm";
|
||||||
|
import { useUserStore } from "@root/user";
|
||||||
|
|
||||||
export default function Component() {
|
export default function Component() {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||||
return(
|
const userId = useUserStore((state) => state.userId);
|
||||||
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
|
const navigate = useNavigate();
|
||||||
sxsect={{
|
|
||||||
height: isMobile ? '702px' : (isTablet ? '986px' : '660px'),
|
|
||||||
}}
|
|
||||||
sxcont={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
padding: isMobile ? "300px 16px 0 16px" : (isTablet ? "494px 40px 0 40px" : 0),
|
|
||||||
marginBottom: isMobile ? '55px' : (isTablet ? 0 : "55px"),
|
|
||||||
}}>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '30px',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: "flex-start",
|
|
||||||
position: 'relative',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography variant='h2'>
|
|
||||||
Pena Quiz
|
|
||||||
</Typography>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
maxWidth: isTablet ? '715px' : '420px',
|
|
||||||
minHeight: '64px',
|
|
||||||
}}>
|
|
||||||
<Typography variant='body1'>
|
|
||||||
Помогаем посетителю оставить заявку. <br style={{display: isTablet ? 'flex' : "none"}}/> Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
{/*<Link */}
|
|
||||||
{/* to="/list"*/}
|
|
||||||
{/* style={{textDecoration: "none"}}>*/}
|
|
||||||
<Button variant="contained"
|
|
||||||
onClick={() => setIsContactFormOpen(true)}
|
|
||||||
>
|
|
||||||
Попробуйте бесплатно
|
|
||||||
|
|
||||||
</Button>
|
|
||||||
{/*</Link>*/}
|
|
||||||
|
|
||||||
<Box
|
const tryItForFreeonClick = () => (userId ? navigate("/list") : setIsContactFormOpen(true));
|
||||||
component={"img"}
|
|
||||||
src={abstraction}
|
return (
|
||||||
sx={{
|
<SectionStyled
|
||||||
position: "absolute",
|
tag={"section"}
|
||||||
bottom: isMobile ? undefined : (isTablet? "138px" : "-291px"),
|
bg={"#f2f3f7"}
|
||||||
maxWidth: isMobile ? "403px" : "810px",
|
mwidth={"1160px"}
|
||||||
width: isMobile ? "100%" : undefined,
|
sxsect={{
|
||||||
left: isMobile ? "-20px" : (isTablet? "54px" : "401px"),
|
height: isMobile ? "702px" : isTablet ? "986px" : "660px",
|
||||||
top: isMobile ? "-345px" : undefined
|
}}
|
||||||
}}
|
sxcont={{
|
||||||
/>
|
display: "flex",
|
||||||
</Box>
|
justifyContent: "space-between",
|
||||||
</SectionStyled>
|
alignItems: "center",
|
||||||
)
|
padding: isMobile ? "300px 16px 0 16px" : isTablet ? "494px 40px 0 40px" : 0,
|
||||||
}
|
marginBottom: isMobile ? "55px" : isTablet ? 0 : "55px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: "30px",
|
||||||
|
height: "100%",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
position: "relative",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h2">Pena Quiz</Typography>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
maxWidth: isTablet ? "715px" : "420px",
|
||||||
|
minHeight: "64px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="body1">
|
||||||
|
Помогаем посетителю оставить заявку. <br style={{ display: isTablet ? "flex" : "none" }} /> Готовые шаблоны
|
||||||
|
квизов с легкой установкой на любой сайт и социальные сети
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
{/*<Link */}
|
||||||
|
{/* to="/list"*/}
|
||||||
|
{/* style={{textDecoration: "none"}}>*/}
|
||||||
|
<Button variant="contained" onClick={tryItForFreeonClick}>
|
||||||
|
Попробуйте бесплатно
|
||||||
|
</Button>
|
||||||
|
{/*</Link>*/}
|
||||||
|
|
||||||
|
<Box
|
||||||
|
component={"img"}
|
||||||
|
src={abstraction}
|
||||||
|
sx={{
|
||||||
|
position: "absolute",
|
||||||
|
bottom: isMobile ? undefined : isTablet ? "138px" : "-291px",
|
||||||
|
maxWidth: isMobile ? "403px" : "810px",
|
||||||
|
width: isMobile ? "100%" : undefined,
|
||||||
|
left: isMobile ? "-20px" : isTablet ? "54px" : "401px",
|
||||||
|
top: isMobile ? "-345px" : undefined,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</SectionStyled>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user