PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Добавил анимацию кнопке: "Задайте нам вопрос"

Browse Source
This commit is contained in:
ArtChaos189 2023-05-25 14:25:44 +03:00 committed by Nastya
parent 11fb28dc58
commit eba25c46ac
2 changed files with 107 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/components/FloatingSupportChat/FloatingSupportChat.tsx
View File

@ -1,44 +1,92 @@
import { Box, Fab } from "@mui/material";
import { Box, Fab, Typography } from "@mui/material";
import { useState } from "react";
import CircleDoubleDown from "./CircleDoubleDownIcon";
import Chat from "./Chat";
export default function FloatingSupportChat() {
const [isChatOpened, setIsChatOpened] = useState<boolean>(false);
const [isChatOpened, setIsChatOpened] = useState<boolean>(false);
return (
<Box sx={{
position: "fixed",
right: "20px",
bottom: "10px",
display: "flex",
flexDirection: "column",
gap: "8px",
width: "clamp(200px, 100% - 40px, 454px)",
zIndex: 10,
}}>
{isChatOpened &&
<Chat sx={{
alignSelf: "start",
width: "clamp(200px, 100%, 400px)",
}} />
}
<Fab
variant={"extended"}
onClick={() => setIsChatOpened(prev => !prev)}
sx={{
pl: "11px",
pr: !isChatOpened ? "15px" : "11px",
gap: "11px",
height: "54px",
borderRadius: "27px",
alignSelf: "end",
}}
>
<CircleDoubleDown isUp={isChatOpened} />
{!isChatOpened && "Задайте нам вопрос"}
</Fab>
</Box>
);
}
const animation = {
"@keyframes runningStripe": {
"0%": {
left: "0",
backgroundColor: "transparent",
},
"20%": {
backgroundColor: "#ffffff",
},
"50%": {
backgroundColor: "#ffffff",
transform: "translate(200px, 0)",
},
"80%": {
backgroundColor: "#ffffff",
},
"100%": {
backgroundColor: "transparent",
boxShadow: "none",
left: "100%",
},
},
};
return (
<Box
sx={{
position: "fixed",
right: "20px",
bottom: "10px",
display: "flex",
flexDirection: "column",
gap: "8px",
width: "clamp(200px, 100% - 40px, 454px)",
zIndex: 10,
}}
>
{isChatOpened && (
<Chat
sx={{
alignSelf: "start",
width: "clamp(200px, 100%, 400px)",
}}
/>
)}
<Fab
disableRipple
sx={{
position: "relative",
backgroundColor: "rgba(255, 255, 255, 0.7)",
pl: "11px",
pr: !isChatOpened ? "15px" : "11px",
gap: "11px",
height: "54px",
borderRadius: "27px",
alignSelf: "end",
overflow: "hidden",
"&:hover": {
background: "rgba(255, 255, 255, 0.7)",
},
}}
variant={"extended"}
onClick={() => setIsChatOpened((prev) => !prev)}
>
{!isChatOpened && (
<Box
sx={{
position: "absolute",
bgcolor: "#FFFFFF",
height: "70px",
width: "30px",
animation: "runningStripe linear 6s infinite",
transform: "rotate(45deg) skewX(20deg) skewY(-10deg)",
...animation,
}}
/>
)}
<CircleDoubleDown isUp={isChatOpened} />
{!isChatOpened && <Typography sx={{ zIndex: "10000" }}>Задайте нам вопрос</Typography>}
</Fab>
</Box>
);
}

41
src/pages/Landing/Landing.tsx
View File

@ -10,26 +10,27 @@ import darkTheme from "@root/utils/themes/dark";
import Navbar from "@root/components/Navbar/Navbar";
interface Props {
templaterOnly?: boolean;
templaterOnly?: boolean;
}
export default function Landing({ templaterOnly = false }: Props) {
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Box sx={{
position: "relative",
}}>
<Navbar isLoggedIn={false} />
<Section1 />
<Section2 templaterOnly={templaterOnly} />
<Section3 />
<Section4 />
<Section5 />
<Footer />
<FloatingSupportChat />
</Box>
</ThemeProvider>
);
}
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Box
sx={{
position: "relative",
}}
>
<Navbar isLoggedIn={false} />
<Section1 />
<Section2 templaterOnly={templaterOnly} />
<Section3 />
<Section4 />
<Section5 />
<Footer />
<FloatingSupportChat />
</Box>
</ThemeProvider>
);
}