мобильный селектор у тарифов

src/pages/Tariffs/NavSelect.tsx

@@ -0,0 +1,97 @@
+import { Box, Select, Typography, MenuItem } from "@mui/material"
+import SimpleArrowDown from "@ui_kit/SimpleArrowDown";
+import { useRef, useState } from "react";
+
+interface Props {
+    selectedItem: TypePages;
+    setSelectedItem: (a: TypePages) => void;
+}
+export const NavSelect = ({
+    selectedItem,
+    setSelectedItem,
+}: Props) => {
+    const ref = useRef<HTMLDivElement | null>(null)
+    const [opened, setOpened] = useState<boolean>(false)
+    return (
+        <Box>
+            <Box
+                sx={{
+                    width: "300px",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    position: "relative",
+                    m: "25px",
+                }}
+                onClick={() => setOpened((isOpened) => !isOpened)}
+            >
+                <Select
+                    ref={ref}
+                    value={selectedItem}
+                    onChange={({ target }) => setSelectedItem(target.value)}
+                    MenuProps={{ disablePortal: true }}
+                    open={opened}
+                    sx={{
+                        width: "300px",
+                        "& .MuiOutlinedInput-notchedOutline": {
+                            border: "none"
+                        },
+                        '& .MuiInputBase-input': {
+                            fontSize: "18px",
+                            fontWeight: 500,
+                            lineHeight: "20px",
+
+                            borderRadius: "28px",
+                            position: 'relative',
+                            backgroundColor: "#EFF0F5",
+                            border: "2px solid white",
+                            padding: '10px 10px 10px 20px',
+                            color: "#7E2AEA",
+                            zIndex: 2,
+                            "&:forus": {
+                                borderRadius: "28px",
+                            },
+                            "&:focus-visible": {
+                                borderRadius: "28px",
+                            }
+                        },
+                        "& .MuiPaper-root.MuiMenu-paper": {
+                            paddingTop: "50px",
+                            marginTop: "-50px",
+                            borderRadius: "28px",
+                            border: "2px solid #ffffff",
+                        },
+                        "& .MuiPopover-root": {
+                            zIndex: 1
+                        },
+                        "& .MuiSvgIcon-root": {
+                            display: "none"
+                        }
+                    }}
+                >
+                    <MenuItem value="count">Тарифы на время</MenuItem>
+                    <MenuItem value="day">Тарифы на объем</MenuItem>
+                    <MenuItem value="dop">Доп. услуги</MenuItem>
+                    <MenuItem value="hide" sx={{ ml: "15px" }}>Убрать логотип “PenaQuiz”</MenuItem>
+                    <MenuItem value="create" sx={{ ml: "15px" }}>Создать квиз на заказ</MenuItem>
+                </Select >
+                <Box
+                    sx={{
+                        width: "36px",
+                        height: "36px",
+                        bgcolor: "white",
+                        borderRadius: "30px",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        position: "absolute",
+                        right: "10px",
+                        zIndex: 2,
+                        transform: opened ? "rotate(180deg)" : "none"
+                    }}
+                >
+                    <SimpleArrowDown />
+                </Box>
+            </Box>
+        </Box>
+    )
+}

src/pages/Tariffs/Tariffs.tsx

@@ -12,9 +12,11 @@ import {
   IconButton,
   Modal,
   Paper,
+  Select,
   Typography,
   useMediaQuery,
   useTheme,
+  MenuItem,
 } from "@mui/material";
 import { clearQuizData } from "@root/quizes/store";
 import { cleanAuthTicketData } from "@root/ticket";
@@ -41,6 +43,7 @@ import type { Discount } from "@model/discounts";
 import { Other } from "./pages/Other";
 import { ModalRequestCreate } from "./ModalRequestCreate";
 import { cancelCC, useCC } from "@/stores/cc";
+import { NavSelect } from "./NavSelect";
 
 const StepperText: Record<string, string> = {
   day: "Тарифы на время",
@@ -294,6 +297,12 @@ function TariffPage() {
           onPromocodeApply={handleApplyPromocode}
         />
       </Box>
+      {isMobile ?
+        <NavSelect
+          selectedItem={selectedItem}
+          setSelectedItem={setSelectedItem}
+        />
+        :
         <Tabs
           names={Object.values(StepperText)}
           items={Object.keys(StepperText)}
@@ -301,6 +310,8 @@ function TariffPage() {
           setSelectedItem={setSelectedItem}
           toDop={() => setSelectedItem("dop")}
         />
+      }
+
 
       <Box
         sx={{