SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

create

Browse Source
This commit is contained in:
ArtChaos189 2024-01-20 13:27:21 +03:00
parent 5323914582
commit deb3a2c672
14 changed files with 799 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -47,6 +47,7 @@ import { Restore } from "./pages/startPage/Restore";
import { isAxiosError } from "axios";
import { useEffect, useLayoutEffect, useRef } from "react";
import { QuizAnswersPage } from "./pages/QuizAnswersPage/QuizAnswersPage";
export function useUserAccountFetcher({
onError,
onNewUserAccount,
@ -209,6 +210,7 @@ export default function App() {
<Route path="/list" element={<MyQuizzesFull />} />
<Route path={"/view"} element={<ViewPage />} />
<Route path={"/tariffs"} element={<Tariffs />} />
<Route path={"/quiz-answers"} element={<QuizAnswersPage />} />
<Route element={<PrivateRoute />}>
{routeslink.map((e, i) => (
<Route

1
src/pages/Questions/Select.tsx
View File

@ -85,7 +85,6 @@ export const Select = ({
borderRadius: "8px",
"& .MuiOutlinedInput-notchedOutline": {
border: `1px solid ${colorMain} !important`,
height: "48px",
borderRadius: "10px",
},
}}

342
src/pages/QuizAnswersPage/CardAnswer.tsx Normal file
View File

@ -0,0 +1,342 @@
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>
);
};

188
src/pages/QuizAnswersPage/QuizAnswersPage.tsx Normal file
View File

@ -0,0 +1,188 @@
import {
Box,
Button,
IconButton,
Typography,
useTheme,
useMediaQuery,
} from "@mui/material";
import HeaderFull from "@ui_kit/Header/HeaderFull";
import SectionWrapper from "@ui_kit/SectionWrapper";
import { FC, useState } from "react";
import { FileExportIcon } from "./icons/FileExporIcon";
import { UpdateIcon } from "./icons/UpdateIcon";
import { Select } from "../../pages/Questions/Select";
import { CheckboxSelect } from "../../ui_kit/CheckboxSelect";
import { CardAnswer } from "./CardAnswer";
import { FilterIcon } from "./icons/FilterIcon";
const options = [
{ label: "Муром (1)", value: "option1" },
{ label: "Москва (1)", value: "option2" },
];
export const QuizAnswersPage: FC = () => {
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
return (
<Box>
<HeaderFull />
<SectionWrapper maxWidth="lg">
<Typography
sx={{ fontSize: "36px", fontWeight: "500", mb: "50px", mt: "60px" }}
>
Заголовок квиза
</Typography>
<Box
sx={{
width: "100%",
display: isTablet ? "flex" : "-moz-initial",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "8px" }}>
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
Ответы на квиз
</Typography>
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
(1)
</Typography>
</Box>
<Box
sx={{
mt: "20px",
mb: "31px",
gap: "30px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: isTablet ? "auto" : "100%",
}}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<IconButton
sx={{
width: "44px",
height: "44px",
borderRadius: "8px",
border: "1px solid #7E2AEA",
}}
>
<FileExportIcon />
</IconButton>
<IconButton
sx={{
width: "44px",
height: "44px",
borderRadius: "8px",
border: "1px solid #7E2AEA",
}}
>
<UpdateIcon />
</IconButton>
{isTablet && (
<IconButton
sx={{
width: "44px",
height: "44px",
borderRadius: "8px",
border: "1px solid #7E2AEA",
}}
>
<FilterIcon />
</IconButton>
)}
</Box>
{!isTablet && (
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
width: "100%",
justifyContent: "flex-end",
}}
>
<Select
sx={{ maxWidth: "223px", width: "100%" }}
items={[
"За все время",
"Сегодня",
"Вчера",
"Последние 7 дней",
"Последние 30 дней",
"Этот месяц",
]}
/>
<Select
sx={{ maxWidth: "223px", width: "100%" }}
items={["Все заявки", "Новые", "Ошибка интеграции"]}
/>
<CheckboxSelect
sx={{ maxWidth: "223px", width: "100%" }}
placeholder="Выберите город"
options={options}
/>
<Button
sx={{
maxWidth: "200px",
width: "100%",
height: "48px",
borderRadius: "8px",
border: "1px solid #7E2AEA",
color: "#7E2AEA",
}}
>
Сбросить фильтры
</Button>
</Box>
)}
</Box>
</Box>
{!isTablet && (
<Box
sx={{
display: "flex",
width: "100%",
alignItems: "center",
mb: "15px",
}}
>
<Typography sx={{ fontSize: "18px", color: "#9A9AAF", mr: "40px" }}>
№ заявки
</Typography>
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
Дата
</Typography>
<Typography
sx={{ fontSize: "18px", color: "#9A9AAF", ml: "288px" }}
>
Контакты
</Typography>
</Box>
)}
<Box
sx={{
display: "flex",
alignItems: "flex-start",
flexDirection: isTablet ? "-moz-initial" : "column",
flexWrap: isTablet ? "wrap" : "nowrap",
gap: "20px",
}}
>
<CardAnswer />
<CardAnswer />
</Box>
</SectionWrapper>
</Box>
);
};

23
src/pages/QuizAnswersPage/icons/ContactIcon.tsx Normal file
View File

@ -0,0 +1,23 @@
export const ContactIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<g opacity="0.5">
<circle
cx="12.0166"
cy="7.89626"
r="3.79782"
fill="#9A9AAF"
stroke="#9A9AAF"
/>
<path
d="M18.1455 13.8094H5.85784C4.81766 13.8094 3.95773 14.6326 4.30614 15.6127C5.09317 17.8266 7.48227 20.4969 12.002 20.4969C16.5224 20.4969 18.9107 17.8266 19.6974 15.6127C20.0456 14.6326 19.1857 13.8094 18.1455 13.8094Z"
fill="#9A9AAF"
/>
</g>
</svg>
);

16
src/pages/QuizAnswersPage/icons/EyeIcon.tsx Normal file
View File

@ -0,0 +1,16 @@
export const EyeIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
>
<path
d="M3.26743 16.0459C2.91085 15.3939 2.91086 14.6059 3.26744 13.9539C5.53334 9.8107 9.93781 7 15 7C20.0622 7 24.4667 9.81079 26.7326 13.9541C27.0891 14.6061 27.0891 15.3941 26.7326 16.0461C24.4667 20.1893 20.0622 23 15 23C9.93782 23 5.53329 20.1892 3.26743 16.0459Z"
stroke="#4D4D4D"
stroke-width="1.5"
/>
<circle cx="15" cy="15" r="4" stroke="#4D4D4D" stroke-width="1.5" />
</svg>
);

24
src/pages/QuizAnswersPage/icons/FileExporIcon.tsx Normal file
View File

@ -0,0 +1,24 @@
export const FileExportIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M19 11.0263V8.18421M9.625 20.5H4V2.5H13.375M13.375 2.5H14.3125L19 7.23684V8.18421M13.375 2.5V8.18421H19"
stroke="#7E2AEA"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16.5 14.5L16.5 22.5M16.5 22.5L20 18.8871M16.5 22.5L13 18.8871"
stroke="#7E2AEA"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

15
src/pages/QuizAnswersPage/icons/FilterIcon.tsx Normal file
View File

@ -0,0 +1,15 @@
export const FilterIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V4.81751C22 5.57739 21.7116 6.30895 21.1932 6.86447L15.5379 12.9237C15.1922 13.294 15 13.7817 15 14.2883V18.382C15 18.7607 14.786 19.107 14.4472 19.2764L10.4472 21.2764C9.78231 21.6088 9 21.1253 9 20.382V14.2883C9 13.7817 8.80776 13.294 8.46211 12.9237L2.80683 6.86446C2.28836 6.30895 2 5.57739 2 4.81751V4Z"
stroke="#7E2AEA"
stroke-width="1.5"
/>
</svg>
);

27
src/pages/QuizAnswersPage/icons/MessageIcon.tsx Normal file
View File

@ -0,0 +1,27 @@
export const MessageIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<g opacity="0.5">
<rect
x="2.5"
y="4.30312"
width="19"
height="15.2"
rx="5"
fill="#9A9AAF"
/>
<path
d="M6.29688 9.05312L10.7969 12.4281C11.508 12.9615 12.4858 12.9615 13.1969 12.4281L17.6969 9.05312"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
</svg>
);

16
src/pages/QuizAnswersPage/icons/PhoneIcon.tsx Normal file
View File

@ -0,0 +1,16 @@
export const PhoneIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<g opacity="0.5">
<path
d="M19.0621 20.2183C17.1077 22.1726 12.1028 20.3363 7.88327 16.1167C3.66372 11.8972 1.82739 6.89227 3.7817 4.93795L5.06847 3.65118C5.9568 2.76286 7.42054 2.78634 8.33784 3.70363L10.3309 5.69672C11.2482 6.61401 11.2717 8.07776 10.3834 8.96609L10.107 9.24247C9.62737 9.72209 9.58045 10.4958 10.0261 11.0359C10.456 11.5568 10.9194 12.0756 11.4219 12.5781C11.9244 13.0806 12.4432 13.544 12.9641 13.9739C13.5042 14.4196 14.2779 14.3726 14.7575 13.893L15.0339 13.6166C15.9222 12.7283 17.386 12.7518 18.3033 13.6691L20.2964 15.6622C21.2137 16.5795 21.2371 18.0432 20.3488 18.9315L19.0621 20.2183Z"
fill="#9A9AAF"
/>
</g>
</svg>
);

16
src/pages/QuizAnswersPage/icons/UpdateIcon.tsx Normal file
View File

@ -0,0 +1,16 @@
export const UpdateIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M5.07435 8.00009C5.81204 6.72238 6.8887 5.67355 8.18528 4.96956C9.48187 4.26557 10.9479 3.93384 12.4212 4.01106C13.8946 4.08827 15.3179 4.57142 16.5338 5.40708C17.7497 6.24275 18.7108 7.39838 19.3109 8.7462M3.23438 5.51546L3.96379 8.67499C4.08802 9.21312 4.62497 9.54866 5.1631 9.42442L8.32264 8.69501M18.9308 16C18.1931 17.2777 17.1165 18.3265 15.8199 19.0305C14.5233 19.7345 13.0573 20.0662 11.5839 19.989C10.1105 19.9118 8.68724 19.4287 7.47134 18.593C6.25545 17.7573 5.29432 16.6017 4.69423 15.2539M20.7708 18.4846L20.0414 15.3251C19.9171 14.787 19.3802 14.4514 18.842 14.5757L15.6825 15.3051"
stroke="#7E2AEA"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
);

BIN
src/pages/QuizAnswersPage/images/home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
src/pages/QuizAnswersPage/images/videoFrame.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

130
src/ui_kit/CheckboxSelect.tsx Normal file
View File

@ -0,0 +1,130 @@
import React, { useState } from "react";
import {
FormControl,
MenuItem,
Select,
Checkbox,
ListItemText,
SelectChangeEvent,
} from "@mui/material";
import ArrowDown from "@icons/ArrowDownIcon";
type CheckboxSelectProps = {
options: { label: string; value: string }[];
sx?: any;
placeholder: string;
};
export const CheckboxSelect: React.FC<CheckboxSelectProps> = ({
options,
sx,
placeholder,
}: CheckboxSelectProps) => {
const [selectedValues, setSelectedValues] = useState<string[]>([]);
const handleChange = (event: SelectChangeEvent<string[]>) => {
const values = event.target.value as string[];
if (values.includes("SelectAll")) {
setSelectedValues(options.map((option) => option.value));
} else {
setSelectedValues(values);
}
};
return (
<FormControl
fullWidth
size="small"
sx={{ width: "100%", height: "48px", ...sx }}
>
<Select
displayEmpty
multiple
value={selectedValues}
onChange={handleChange}
sx={{
width: "100%",
height: "48px",
borderRadius: "8px",
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #7E2AEA !important",
borderRadius: "10px",
},
}}
MenuProps={{
PaperProps: {
sx: {
mt: "8px",
p: "4px",
borderRadius: "8px",
backgroundColor: "#F5F2FF",
border: "1px solid #EEE4FC",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
},
},
MenuListProps: {
sx: {
py: 0,
display: "flex",
flexDirection: "column",
gap: "8px",
"& .Mui-selected": {
backgroundColor: "#F5F2FF",
color: "#7E2AEA",
},
},
},
}}
inputProps={{
sx: {
color: "#7E2AEA",
display: "block",
px: "9px",
gap: "20px",
width: "90%",
},
}}
IconComponent={(props) => <ArrowDown {...props} />}
renderValue={(selected) => {
if (selected.length === 0) {
return <span style={{ color: "#7E2AEA" }}>{placeholder}</span>;
}
return (
<span>
{options
.filter((option) => selected.includes(option.value))
.map((option) => option.label)
.join(", ")}
</span>
);
}}
>
<MenuItem
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
value="SelectAll"
>
<Checkbox
sx={{ padding: "0", borderRadius: "6px" }}
checked={selectedValues.includes("SelectAll")}
/>
<ListItemText primary="Выбрать все" />
</MenuItem>
{options.map((option) => (
<MenuItem key={option.value} value={option.value}>
<ListItemText primary={option.label} />
<Checkbox
sx={{ padding: "0", borderRadius: "6px" }}
checked={selectedValues.includes(option.value)}
/>
</MenuItem>
))}
</Select>
</FormControl>
);
};