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 ? "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 />
                :
                <>
                    <CreateTicket />
                    <List sx={{
                        mt: upMd ? "40px" : "60px",
                        p: 0,
                        display: "flex",
                        flexDirection: "column",
                        gap: "40px",
                    }}>
                        <ListItem disablePadding>
                            <TicketCard
                                name="Название обращения"
                                body="Текст-заполнитель — 
                                это текст, который имеет Текст-заполнитель — 
                                это текст, который имеет Текст-заполнитель — 
                                это текст, который имеет Текст-заполнитель — 
                                это текст, который имеет Текст-заполнитель"
                                time="24.01.2022 16:40"
                                ticketId="someTicketId"
                            />
                        </ListItem>
                        <ListItem disablePadding>
                            <TicketCard
                                name="Название обращения Текст-заполнитель — 
                                это текст, который имеет Текст-заполнитель — 
                                это текст, который имеет"
                                body="Текст-заполнитель — 
                                это текст, который имеет Текст-заполнитель — 
                                это текст, который имеет Текст-заполнитель — 
                                это текст, который имеет Текст-заполнитель — "
                                time="24.01.2022 16:40"
                                ticketId="someTicketId"
                            />
                        </ListItem>
                        <ListItem disablePadding>
                            <TicketCard
                                name="Название обращения"
                                body="Текст-заполнитель — 
                                это текст, который имеет Текст-заполнитель — 
                                это текст, который имеет Текст-заполнитель — 
                                это текст, который имеет Текст-заполните"
                                time="24.01.2022 16:40"
                                ticketId="someTicketId"
                            />
                        </ListItem>
                    </List>
                </>
            }
        </SectionWrapper>
    );
}