add support page
This commit is contained in:
nflnkr
parent
42fb840ccf
commit
03448bab75
70
src/pages/Support/Message.tsx
Normal file
70
src/pages/Support/Message.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
153
src/pages/Support/Support.tsx
Normal file
153
src/pages/Support/Support.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user