77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
|
import { useState } from "react";
|
|||
|
|
import {
|
|||
|
|
Box,
|
|||
|
|
IconButton,
|
|||
|
|
Typography,
|
|||
|
|
useMediaQuery,
|
|||
|
|
useTheme,
|
|||
|
|
} from "@mui/material";
|
|||
|
|
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
|||
|
|
|
|||
|
|
import ComplexNavText from "@root/components/ComplexNavText";
|
|||
|
|
import SectionWrapper from "@root/components/SectionWrapper";
|
|||
|
|
import { Select } from "@root/components/Select";
|
|||
|
|
import { Tabs } from "@root/components/Tabs";
|
|||
|
|
|
|||
|
|
import AccordionWrapper from "./AccordionWrapper";
|
|||
|
|
import { HISTORY } from "./historyMocks";
|
|||
|
|
|
|||
|
|
const subPages = ["Платежи", "Покупки тарифов", "Окончания тарифов"];
|
|||
|
|
|
|||
|
|
export default function History() {
|
|||
|
|
const [selectedItem, setSelectedItem] = useState<number>(0);
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
|||
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
|||
|
|
|
|||
|
|
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>
|
|||
|
|
{isMobile ? (
|
|||
|
|
<Select
|
|||
|
|
items={subPages}
|
|||
|
|
selectedItem={selectedItem}
|
|||
|
|
setSelectedItem={setSelectedItem}
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<Tabs
|
|||
|
|
items={subPages}
|
|||
|
|
selectedItem={selectedItem}
|
|||
|
|
setSelectedItem={setSelectedItem}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{HISTORY.map((history, index) => (
|
|||
|
|
<Box
|
|||
|
|
hidden={selectedItem !== index}
|
|||
|
|
sx={{ mt: upMd ? "27px" : "10px" }}
|
|||
|
|
>
|
|||
|
|
<AccordionWrapper content={history} />
|
|||
|
|
</Box>
|
|||
|
|
))}
|
|||
|
|
</SectionWrapper>
|
|||
|
|
);
|
|||
|
|
}
|