1  import { cloneElement, useState } from "react";
 2  import { styled } from "@mui/material";
 3  import clsx from "clsx";
 4  
 5  import { topBarHeight } from "app/utils/constant";
 6  
 7  const PopupRoot = styled("div")(({ theme }) => ({
 8    "& .popupOpen": {
 9      top: topBarHeight + 16,
10      [theme.breakpoints.down("sm")]: { bottom: 0 }
11    },
12    "& .closeIcon": { position: "absolute", top: 6, right: 6 }
13  }));
14  
15  const Popup = styled("div")(({ theme }) => ({
16    position: "fixed",
17    right: theme.spacing(2),
18    bottom: theme.spacing(2),
19    top: "100vh",
20    transition: "top 250ms ease-in-out",
21    boxShadow: theme.shadows[6],
22    borderRadius: 6,
23    zIndex: 99999,
24    width: 360,
25    overflow: "hidden",
26    "@media only screen and (max-width: 450px)": {
27      width: "calc(100% - 32px)",
28      left: theme.spacing(2)
29    }
30  }));
31  
32  export default function ChatHead({ icon, children }) {
33    const [open, setOpen] = useState(false);
34  
35    const togglePopup = () => setOpen((open) => !open);
36  
37    return (
38      <PopupRoot>
39        {cloneElement(icon, { onClick: togglePopup })}
40        <Popup className={clsx({ popupOpen: open })}>
41          {open ? cloneElement(children, { togglePopup }) : null}
42        </Popup>
43      </PopupRoot>
44    );
45  }