343 lines
11 KiB
TypeScript
343 lines
11 KiB
TypeScript
|
import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
|
|||
|
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
|||
|
|
import { FC, useState } from "react";
|
|||
|
|
import { ContactIcon } from "./icons/ContactIcon";
|
|||
|
|
import { MessageIcon } from "./icons/MessageIcon";
|
|||
|
|
import { PhoneIcon } from "./icons/PhoneIcon";
|
|||
|
|
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
|||
|
|
|
|||
|
|
import homeImg from "./images/home.png";
|
|||
|
|
import videoFrame from "./images/videoFrame.png";
|
|||
|
|
import { EyeIcon } from "./icons/EyeIcon";
|
|||
|
|
|
|||
|
|
export const CardAnswer: FC = () => {
|
|||
|
|
const [isOpen, setIsOpen] = useState<boolean>(false);
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
|||
|
|
return (
|
|||
|
|
<Box
|
|||
|
|
onClick={() => setIsOpen(!isOpen)}
|
|||
|
|
sx={{
|
|||
|
|
maxWidth: isTablet ? "450px" : "auto",
|
|||
|
|
width: "100%",
|
|||
|
|
display: "flex",
|
|||
|
|
justifyContent: "space-between",
|
|||
|
|
flexDirection: isTablet ? "column" : "-moz-initial",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
flexDirection: isTablet ? "column" : "-moz-initial",
|
|||
|
|
cursor: "pointer",
|
|||
|
|
p: "20px",
|
|||
|
|
borderRadius: isOpen ? "0" : "12px 0 0 12px",
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "flex-start",
|
|||
|
|
background: "#FFF",
|
|||
|
|
width: "100%",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: isTablet ? "100%" : "auto",
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "flex-start",
|
|||
|
|
flexDirection: isTablet ? "row-reverse" : "-moz-initial",
|
|||
|
|
justifyContent: isTablet ? "space-between" : "-moz-initial",
|
|||
|
|
pb: isTablet ? "20px" : "0",
|
|||
|
|
mb: isTablet ? "20px" : "0",
|
|||
|
|
borderBottom: isTablet
|
|||
|
|
? "1px solid rgba(154, 154, 175, 0.50)"
|
|||
|
|
: "0",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "6px" }}>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
width: "30px",
|
|||
|
|
height: "30px",
|
|||
|
|
borderRadius: "50%",
|
|||
|
|
background: "#EEE4FC",
|
|||
|
|
color: "#7E2AEA",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
1
|
|||
|
|
</Box>
|
|||
|
|
<ArrowDownIcon
|
|||
|
|
style={{ transform: isOpen ? "rotate(180deg)" : "0" }}
|
|||
|
|
fontSize="10px"
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Typography
|
|||
|
|
sx={{
|
|||
|
|
ml: isTablet ? "0" : "50px",
|
|||
|
|
mr: isTablet ? "0" : "188px",
|
|||
|
|
fontSize: "18px",
|
|||
|
|
color: "#7E2AEA",
|
|||
|
|
maxWidth: "143px",
|
|||
|
|
width: "100%",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Сегодня в 18:59 Россия, Москва
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: "10px" }}>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|||
|
|
<ContactIcon />
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
|
|||
|
|
Екатерина
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|||
|
|
<MessageIcon />
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
|
|||
|
|
exampleemail@gmail.com
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|||
|
|
<PhoneIcon />
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
|
|||
|
|
+79876543210
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{!isTablet && (
|
|||
|
|
<Typography
|
|||
|
|
sx={{
|
|||
|
|
ml: "auto",
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
background: "#FB5607",
|
|||
|
|
borderRadius: "8px",
|
|||
|
|
width: "77px",
|
|||
|
|
height: "36px",
|
|||
|
|
color: "white",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Новая
|
|||
|
|
</Typography>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
p: isTablet ? "20px" : "0",
|
|||
|
|
cursor: "pointer",
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: isTablet ? "space-between" : "center",
|
|||
|
|
width: isTablet ? "100%" : "100px",
|
|||
|
|
background: "#F2F3F7",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{isTablet ? (
|
|||
|
|
<>
|
|||
|
|
<Typography
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
background: "#FB5607",
|
|||
|
|
borderRadius: "8px",
|
|||
|
|
width: "77px",
|
|||
|
|
height: "36px",
|
|||
|
|
color: "white",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Новая
|
|||
|
|
</Typography>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|||
|
|
<EyeIcon />
|
|||
|
|
<span
|
|||
|
|
style={{
|
|||
|
|
height: "50px",
|
|||
|
|
width: "2px",
|
|||
|
|
background: "rgba(154, 154, 175, 0.50)",
|
|||
|
|
margin: "0 20px",
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<DeleteIcon color="#4D4D4D" fontSize="34px" />
|
|||
|
|
</Box>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<DeleteIcon color="#4D4D4D" fontSize="34px" />
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{isOpen && (
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
maxWidth: isTablet ? "450px" : "auto",
|
|||
|
|
width: "100%",
|
|||
|
|
boxShadow:
|
|||
|
|
"0px 2.767px 8.551px 0px rgba(210, 208, 225, 0.07), 0px 6.65px 20.549px 0px rgba(210, 208, 225, 0.10), 0px 12.522px 38.692px 0px rgba(210, 208, 225, 0.12), 0px 22.336px 69.019px 0px rgba(210, 208, 225, 0.14), 0px 41.778px 129.093px 0px rgba(210, 208, 225, 0.17), 0px 100px 309px 0px rgba(210, 208, 225, 0.24)",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
p: "20px",
|
|||
|
|
borderTop: "1px solid #F1F2F6",
|
|||
|
|
background: "#FFF",
|
|||
|
|
borderRadius: "0 0 12px 12px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|||
|
|
Ответы
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
gap: isTablet ? "0" : "149px",
|
|||
|
|
p: "20px",
|
|||
|
|
flexDirection: isTablet ? "column" : "-moz-initial",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
gap: "15px",
|
|||
|
|
mt: "20px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|||
|
|
1.
|
|||
|
|
</Typography>
|
|||
|
|
<Typography sx={{ fontSize: "18px" }}>
|
|||
|
|
Ответ на 1 вопрос
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|||
|
|
2.
|
|||
|
|
</Typography>
|
|||
|
|
<img src={homeImg} style={{ width: "40px", height: "40px" }} />
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|||
|
|
3.
|
|||
|
|
</Typography>
|
|||
|
|
<Typography
|
|||
|
|
sx={{
|
|||
|
|
fontSize: "18px",
|
|||
|
|
color: "#7E2AEA",
|
|||
|
|
borderBottom: "1px solid #7E2AEA",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
ответ.doc
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|||
|
|
4.
|
|||
|
|
</Typography>
|
|||
|
|
<Typography sx={{ fontSize: "18px" }}>
|
|||
|
|
Ответ на 4 вопрос
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|||
|
|
5.
|
|||
|
|
</Typography>
|
|||
|
|
<Typography sx={{ fontSize: "18px" }}>
|
|||
|
|
Ответ на 5 вопрос
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|||
|
|
6.
|
|||
|
|
</Typography>
|
|||
|
|
<Typography sx={{ fontSize: "18px" }}>
|
|||
|
|
Ответ на 6 вопрос
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
gap: "15px",
|
|||
|
|
mt: "20px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|||
|
|
7.
|
|||
|
|
</Typography>
|
|||
|
|
<Typography sx={{ fontSize: "18px" }}>
|
|||
|
|
Ответ на 7 вопрос
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|||
|
|
8.
|
|||
|
|
</Typography>
|
|||
|
|
<Typography sx={{ fontSize: "18px" }}>
|
|||
|
|
Ответ на 8 вопрос
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|||
|
|
9.
|
|||
|
|
</Typography>
|
|||
|
|
<Typography sx={{ fontSize: "18px" }}>
|
|||
|
|
Ответ на 9 вопрос
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|||
|
|
10.
|
|||
|
|
</Typography>
|
|||
|
|
<img
|
|||
|
|
src={videoFrame}
|
|||
|
|
style={{ width: "40px", height: "40px" }}
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
p: "20px",
|
|||
|
|
borderTop: "1px solid #F1F2F6",
|
|||
|
|
background: "#FFF",
|
|||
|
|
borderRadius: "0 0 12px 12px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
|
|||
|
|
Результаты
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
gap: "15px",
|
|||
|
|
p: "20px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography sx={{ fontSize: "18px", fontWeight: "500" }}>
|
|||
|
|
Заголовок
|
|||
|
|
</Typography>
|
|||
|
|
<Typography sx={{ fontSize: "18px" }}>Текст</Typography>
|
|||
|
|
<img src={homeImg} style={{ width: "40px", height: "40px" }} />
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
};
|