add support page

This commit is contained in:
nflnkr 2022-11-23 14:46:04 +03:00
parent 42fb840ccf
commit 03448bab75
2 changed files with 223 additions and 0 deletions

@ -0,0 +1,70 @@
import { Box, Typography } from "@mui/material";
interface Props {
isSelf: boolean;
text: string;
time: string;
}
export default function Message({ isSelf, text, time }: Props) {
return (
<Box
sx={{
display: "flex",
alignSelf: isSelf ? "end" : "start",
gap: "9px",
pl: isSelf ? undefined : "8px",
pr: isSelf ? "8px" : undefined,
}}
>
<Typography
sx={{
alignSelf: "end",
fontWeight: 400,
fontSize: "14px",
lineHeight: "17px",
order: isSelf ? 1 : 2,
color: "#9A9AAF",
mb: "-4px",
}}
>{time}</Typography>
<Box
sx={{
backgroundColor: isSelf ? "white" : "#9A9AAF",
border: "1px solid #9A9AAF",
order: isSelf ? 2 : 1,
p: "18px",
borderRadius: "8px",
maxWidth: "464px",
color: isSelf ? "#4D4D4D" : "white",
position: "relative",
}}
>
<svg
style={{
position: "absolute",
top: "-1px",
right: isSelf ? "-8px" : undefined,
left: isSelf ? undefined : "-8px",
transform: isSelf ? undefined : "scale(-1, 1)",
}}
xmlns="http://www.w3.org/2000/svg"
width="16"
height="8"
viewBox="0 0 16 8"
fill="none"
>
<path d="M0.5 0.5L15.5 0.500007
C10 0.500006 7.5 8 7.5 7.5H7.5H0.5V0.5Z"
fill={isSelf ? "white" : "#9A9AAF"}
stroke="#9A9AAF"
/>
<rect y="1" width="8" height="8" fill={isSelf ? "white" : "#9A9AAF"} />
</svg>
<Typography>{text}</Typography>
</Box>
</Box>
);
}

@ -0,0 +1,153 @@
import { Typography, Box, useTheme, InputBase } from "@mui/material";
import { useState } from "react";
import CustomButton from "../../components/CustomButton";
import SectionWrapper from "../../components/SectionWrapper";
import Message from "./Message";
export default function Support() {
const theme = useTheme();
const [messageText, setMessageText] = useState<string>("");
return (
<SectionWrapper
maxWidth="lg"
sx={{
mt: "25px",
mb: "70px",
}}
>
<Typography
sx={{
fontWeight: 400,
fontSize: "12px",
lineHeight: "14px",
color: "#9A9AAF",
}}
>
{`Все тарифы — `}
<Typography
component="span"
sx={{
fontWeight: 400,
fontSize: "12px",
lineHeight: "14px",
color: "#C19AF5",
textUnderlinePosition: "under",
textDecorationColor: theme.palette.custom.brightPurple.main,
}}
>Запрос в службу техподдержки</Typography>
</Typography>
<Typography variant="h4" sx={{ mt: "20px", mb: "40px" }}>Запрос в службу техподдержки</Typography>
<Box
sx={{
backgroundColor: "white",
display: "flex",
borderRadius: "12px",
p: "20px",
gap: "40px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
}}
>
<Box
sx={{
display: "flex",
alignItems: "start",
flexDirection: "column",
flexGrow: 1,
}}
>
<Typography variant="h5" mb="4px">Заголовок</Typography>
<Typography sx={{
fontWeight: 400,
fontSize: "14px",
lineHeight: "17px",
color: "#9A9AAF",
mb: "9px",
}}>Создан: 15.09.22 08:39</Typography>
<Box
sx={{
backgroundColor: "#ECECF3",
border: "1px solid #9A9AAF",
borderRadius: "10px",
overflow: "hidden",
width: "100%",
minHeight: "345px",
display: "flex",
flexDirection: "column",
}}
>
<Box
sx={{
flexGrow: 1,
width: "100%",
borderBottom: "1px solid #9A9AAF",
p: "20px",
display: "flex",
flexDirection: "column",
gap: "20px",
maxHeight: "500px",
overflow: "auto",
}}
>
<Message
text="Текст-заполнитель — это текст, который имеет "
time="16:40"
isSelf={false}
/>
<Message
text="Текст-заполнитель — это текст, который имеет "
time="16:40"
isSelf={true}
/>
<Message
text="Текст-заполнитель — это текст"
time="16:40"
isSelf={false}
/>
</Box>
<InputBase
value={messageText}
fullWidth
placeholder="Текст обращения"
id="message"
multiline
sx={{
width: "100%",
p: 0,
}}
inputProps={{
sx: {
fontWeight: 400,
fontSize: "16px",
py: "9px",
px: "19px",
}
}}
onChange={e => setMessageText(e.target.value)}
/>
</Box>
</Box>
<Box
sx={{
alignSelf: "end",
}}
>
<CustomButton
variant="contained"
sx={{
backgroundColor: theme.palette.custom.brightPurple.main,
mt: "auto",
}}
>Отправить</CustomButton>
</Box>
</Box>
</SectionWrapper>
);
}