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

import { Typography, Box, useTheme, useMediaQuery, IconButton, List, ListItem } from "@mui/material";
import SectionWrapper from "../../components/SectionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ComplexNavText from "../../components/ComplexNavText";
import SupportChat from "./SupportChat";
import CreateTicket from "./CreateTicket";
import TicketCard from "./TicketCard";
import { useParams } from "react-router-dom";


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 ? "70px" : "18px",
                height: "100%",
                display: "flex",
                flexDirection: "column",
            }}
            outerContainerSx={{
                height: upMd ? undefined : "calc(100vh - 51px)",
            }}
        >
            {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 />
                :
                <>
                    <CreateTicket />
                    <List sx={{ mt: "40px" }}>
                        <ListItem sx={{ px: 0 }}>
                            <TicketCard
                                name="Название тикета"
                                body="Содержание тикета"
                                time="15.09.22 08:39"
                                ticketId="someTicketId"
                            />
                        </ListItem>
                    </List>
                </>
            }
        </SectionWrapper >
    );
}