83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
|
import { Box, IconButton, Tabs, Typography, useMediaQuery, useTheme } from "@mui/material";
|
|||
|
|
import ComplexNavText from "../../components/ComplexNavText";
|
|||
|
|
import SectionWrapper from "../../components/SectionWrapper";
|
|||
|
|
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
|||
|
|
import { useState } from "react";
|
|||
|
|
import AccordionWrapperBasket from "./AccordionWrapper";
|
|||
|
|
import CustomButton from "../../components/CustomButton";
|
|||
|
|
import TotalPrice from "../../components/TotalPrice";
|
|||
|
|
|
|||
|
|
|
|||
|
|
interface TabPanelProps {
|
|||
|
|
index: number;
|
|||
|
|
value: number;
|
|||
|
|
children?: React.ReactNode;
|
|||
|
|
mt: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function TabPanel({ index, value, children, mt }: TabPanelProps) {
|
|||
|
|
return (
|
|||
|
|
<Box
|
|||
|
|
hidden={index !== value}
|
|||
|
|
sx={{ mt }}
|
|||
|
|
>
|
|||
|
|
{children}
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const contentBasket = [
|
|||
|
|
["Шаблонизатор", "Дисковое хранилище 5 гб", 1290, 390]
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
export default function BasketPage() {
|
|||
|
|
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
|||
|
|
const [tabIndex, setTabIndex] = useState<number>(0);
|
|||
|
|
|
|||
|
|
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
|
|||
|
|
setTabIndex(newValue);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<SectionWrapper
|
|||
|
|
maxWidth="lg"
|
|||
|
|
sx={{
|
|||
|
|
mt: upMd ? "25px" : "20px",
|
|||
|
|
mb: upMd ? "70px" : "37px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{upMd &&
|
|||
|
|
<ComplexNavText text1="Все тарифы — " text2="Корзина" />
|
|||
|
|
}
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
mt: "20px",
|
|||
|
|
mb: upMd ? "40px" : "20px",
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "10px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{!upMd &&
|
|||
|
|
<IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
|
|||
|
|
<ArrowBackIcon />
|
|||
|
|
</IconButton>
|
|||
|
|
}
|
|||
|
|
<Typography variant="h4">Вопросы и ответы</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
|
|||
|
|
<AccordionWrapperBasket
|
|||
|
|
content={[
|
|||
|
|
["Шаблонизатор", "Дисковое хранилище 5 гб", 3190, 390],
|
|||
|
|
["Квиз конструктор ", "Подписка на месяц", 3190, 490],
|
|||
|
|
]}
|
|||
|
|
/>
|
|||
|
|
</TabPanel>
|
|||
|
|
<TotalPrice/>
|
|||
|
|
</SectionWrapper >
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|