frontPanel/src/pages/Result/DescriptionForm/ImageAndVideoButtons.tsx

import { Box, Typography, useTheme } from "@mui/material";

import AddImage from "@icons/questionsPage/addImage";
import AddVideofile from "@icons/questionsPage/addVideofile";
import { useState } from "react";
import { CroppingModal } from "@ui_kit/Modal/CroppingModal";

export default function ImageAndVideoButtons() {
  const theme = useTheme();

  const [opened, setOpened] = useState<boolean>(false);

  return (
    <Box sx={{ display: "flex", alignItems: "center", gap: "12px", mt: "20px", mb: "20px" }}>
      <AddImage onClick={() => setOpened(true)} />
      <CroppingModal opened={opened} onClose={() => setOpened(false)} />
      <Typography
        sx={{
          fontWeight: 400,
          fontSize: "16px",
          lineHeight: "18.96px",
          color: theme.palette.grey2.main,
        }}
      >
        Изображение
      </Typography>
      <Typography> или</Typography>
      <AddVideofile />
      <Typography
        sx={{
          fontWeight: 400,
          fontSize: "16px",
          lineHeight: "18.96px",
          color: theme.palette.grey2.main,
        }}
      >
        Видео
      </Typography>
    </Box>
  );
}