front-hub/src/pages/SavedTariffs/index.tsx

import {
  IconButton,
  Box,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import SectionWrapper from "../../components/SectionWrapper";
import AccordionWrapper from "./AccordionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";

export default function Faq() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));

  return (
    <SectionWrapper
      maxWidth="lg"
      sx={{
        mt: upMd ? "25px" : "20px",
        mb: upMd ? "70px" : "37px",
      }}
    >
      <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>
      <Box mt={upMd ? "27px" : "10px"}>
        <AccordionWrapper
          content={[
            {
              date: "20.05.2022",
              title: "Шаблонизатор",
              amount: "5 000 шаблонов",
              price: 3190,
              description:
                "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
            },
            {
              date: "27.05.2022",
              title: "Опросник",
              amount: "9 месяцев 1 000 шаблонов",
              price: 2190,
              description:
                "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
            },
            {
              date: "20.05.2022",
              title: "Шаблонизатор",
              amount: "Безлимит",
              price: 1190,
              description:
                "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
            },
            {
              date: "08.04.2022",
              title: "Опросник",
              amount: "10 000 шаблонов",
              price: 3190,
              description:
                "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
            },
            {
              date: "28.05.2022",
              title: "Сокращатель ссылок",
              amount: "3 дня",
              price: 5190,
              description:
                "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
            },
            {
              date: "18.03.2022",
              title: "Шаблонизатор",
              amount: "9 месяцев 1 000 шаблонов",
              price: 6190,
              description:
                "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
            },
          ]}
        />
      </Box>
    </SectionWrapper>
  );
}