import { styled } from '@mui/material'; import { topBarHeight } from 'app/utils/constant'; import clsx from 'clsx'; import { cloneElement, useState } from 'react'; const PopupRoot = styled('div')(({ theme }) => ({ '& .popupOpen': { top: topBarHeight + 16, [theme.breakpoints.down('sm')]: { bottom: 0 }, }, '& .closeIcon': { position: 'absolute', top: 6, right: 6, }, })); const Popup = styled('div')(({ theme }) => ({ position: 'fixed', right: theme.spacing(2), bottom: theme.spacing(2), top: '100vh', transition: 'top 250ms ease-in-out', boxShadow: theme.shadows[6], borderRadius: 6, zIndex: 99999, width: 360, overflow: 'hidden', '@media only screen and (max-width: 450px)': { width: 'calc(100% - 32px)', left: theme.spacing(2), }, })); const ChatHead = ({ icon, children }) => { const [open, setOpen] = useState(false); const togglePopup = async () => { setOpen((open) => !open); }; return ( <PopupRoot> {cloneElement(icon, { onClick: togglePopup })} <Popup className={clsx({ popupOpen: open })}> {open ? cloneElement(children, { togglePopup }) : null} </Popup> </PopupRoot> ); }; export default ChatHead;