front-hub/src/pages/Support/Support.tsx

import { Typography, Box, useTheme, useMediaQuery, IconButton } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useParams } from "react-router-dom";

import SectionWrapper from "@components/SectionWrapper";
import ComplexNavText from "@components/ComplexNavText";
import SupportChat from "./SupportChat";
import CreateTicket from "./CreateTicket";

import TicketList from "./TicketList";

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

  return (
    <SectionWrapper
      maxWidth="lg"
      sx={{
        pt: upMd ? "25px" : "20px",
        pb: upMd ? "82px" : "43px",
        height: "100%",
      }}
    >
      {upMd && <ComplexNavText text1="Все тарифы — " text2="Запрос в службу техподдержки" />}
      <Box
        sx={{
          mt: "20px",
          mb: "40px",
          display: "flex",
          gap: "10px",
        }}
      >
        {!upMd && (
          <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
            <ArrowBackIcon />
          </IconButton>
        )}
        <Typography variant="h4">Запрос в службу техподдержки</Typography>
      </Box>
      {ticketId ? (
        <SupportChat />
      ) : (
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            gap: upMd ? "40px" : "60px",
          }}
        >
          <CreateTicket />
          <TicketList />
        </Box>
      )}
    </SectionWrapper>
  );
}