From 03448bab758f0d0503a341fae6278233a9164342 Mon Sep 17 00:00:00 2001
From: nflnkr <105123049+nflnkr@users.noreply.github.com>
Date: Wed, 23 Nov 2022 14:46:04 +0300
Subject: [PATCH] add support page

---
 src/pages/Support/Message.tsx |  70 ++++++++++++++++
 src/pages/Support/Support.tsx | 153 ++++++++++++++++++++++++++++++++++
 2 files changed, 223 insertions(+)
 create mode 100644 src/pages/Support/Message.tsx
 create mode 100644 src/pages/Support/Support.tsx

diff --git a/src/pages/Support/Message.tsx b/src/pages/Support/Message.tsx
new file mode 100644
index 0000000..d8e2f8b
--- /dev/null
+++ b/src/pages/Support/Message.tsx
@@ -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>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/Support/Support.tsx b/src/pages/Support/Support.tsx
new file mode 100644
index 0000000..fc5604b
--- /dev/null
+++ b/src/pages/Support/Support.tsx
@@ -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>
+    );
+}
\ No newline at end of file