60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { useState } from "react";
|
||
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||
|
||
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";
|
||
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
|
||
|
||
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));
|
||
|
||
const handleCustomBackNavigation = useHistoryTracker();
|
||
|
||
return (
|
||
<SectionWrapper
|
||
maxWidth="lg"
|
||
sx={{
|
||
mt: upMd ? "25px" : "20px",
|
||
mb: upMd ? "70px" : "37px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
mt: "20px",
|
||
mb: "20px",
|
||
display: "flex",
|
||
gap: "10px",
|
||
}}
|
||
>
|
||
{!upMd && (
|
||
<IconButton onClick={handleCustomBackNavigation} 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>
|
||
);
|
||
}
|