frontPanel/src/ui_kit/CustomWrapper.tsx

import { useState } from "react";
import {
  Box,
  IconButton,
  SxProps,
  Theme,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";

import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
import CopyIcon from "@icons/CopyIcon";
import TrashIcon from "@icons/TrashIcon";
import CountIcon from "@icons/CountIcon";
import MenuIcon from "@icons/MenuIcon";

interface Props {
  text: string;
  sx?: SxProps<Theme>;
  result?: boolean;
}

export default function CustomWrapper({ text, sx, result }: Props) {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const upSm = useMediaQuery(theme.breakpoints.up("sm"));
  const [isExpanded, setIsExpanded] = useState<boolean>(false);

  return (
    <Box
      sx={{
        maxWidth: "796px",

        overflow: "hidden",
        borderRadius: "12px",
        boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
                            0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
                            0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
                            0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                            0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
                            0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
                              4749)`,
        ...sx,
      }}
    >
      <Box
        sx={{
          backgroundColor: "#333647",
          "&:first-of-type": {
            borderTopLeftRadius: "12px",
            borderTopRightRadius: "12px",
          },
          "&:last-of-type": {
            borderBottomLeftRadius: "12px",
            borderBottomRightRadius: "12px",
          },
          "&:not(:last-of-type)": {
            borderBottom: `1px solid ${theme.palette.grey2.main}`,
          },
        }}
      >
        <Box
          onClick={() => setIsExpanded((prev) => !prev)}
          sx={{
            height: "88px",
            px: "20px",
            border: "1px solid white",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            cursor: "pointer",
            userSelect: "none",
            "&:hover": {
              borderColor: "#7E2AEA",
              borderRadius: `${isExpanded ? "" : "12px"}`,
              borderTopLeftRadius: "12px",
              borderTopRightRadius: "12px",
            },
          }}
        >
          <Typography
            sx={{
              fontSize: "18px",
              lineHeight: upMd ? undefined : "19px",
              fontWeight: 400,
              color: "#FFFFFF",
              px: 0,
            }}
          >
            {text}
          </Typography>

          <Box
            sx={{
              display: "flex",
              height: "100%",
              alignItems: "center",
            }}
          >
            {result ? (
              <>
                <svg
                  width="30"
                  height="31"
                  viewBox="0 0 30 31"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <rect
                    y="0.8125"
                    width="30"
                    height="30"
                    rx="6"
                    fill="#252734"
                  />
                  <path
                    d="M7.5 19.5625L15 12.0625L22.5 19.5625"
                    stroke="#7E2AEA"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                <IconButton>
                  <CrossedEyeIcon />
                </IconButton>
                <IconButton>
                  <CopyIcon />
                </IconButton>

                <IconButton>
                  <TrashIcon />
                </IconButton>
                <Box
                  sx={{
                    borderLeft: upSm ? "1px solid #9A9AAF" : "none",
                    pl: upSm ? "2px" : 0,
                    height: "50%",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <IconButton>
                    <CountIcon />
                  </IconButton>
                </Box>

                <IconButton>
                  <MenuIcon />
                </IconButton>
              </>
            ) : (
              <svg
                width="30"
                height="31"
                viewBox="0 0 30 31"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
                <path
                  d="M7.5 19.5625L15 12.0625L22.5 19.5625"
                  stroke="#7E2AEA"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            )}
          </Box>
        </Box>
        {isExpanded && (
          <Box
            sx={{
              px: "20px",
              py: upMd ? "25px" : undefined,
              pt: upMd ? undefined : "15px",
              pb: upMd ? undefined : "25px",
              backgroundColor: "#F1F2F6",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              gap: "15px",
            }}
          >
            <Typography
              sx={{
                fontSize: upMd ? undefined : "16px",
                lineHeight: upMd ? undefined : "19px",
                color: theme.palette.grey3.main,
              }}
            >
              desc
            </Typography>
            <Box
              sx={{
                display: "flex",
                justifyContent: "space-between",
                gap: "10px",
                alignItems: "center",
                width: upSm ? "195px" : "123px",
                marginRight: upSm ? "65px" : 0,
              }}
            >
              <Typography
                sx={{
                  color: theme.palette.grey3.main,
                  fontSize: upSm ? "20px" : "16px",
                  fontWeight: 500,
                }}
              >
                10 руб.
              </Typography>
            </Box>
          </Box>
        )}
      </Box>
    </Box>
  );
}