import IconButton from "@material-ui/core/IconButton" import { makeStyles } from "@material-ui/core/styles" import Typography from "@material-ui/core/Typography" import React, { useEffect } from "react" import { CloseIcon } from "../Icons/CloseIcon" export interface FormCloseButtonProps { onClose: () => void } export const FormCloseButton: React.FC> = ({ onClose, }) => { const styles = useStyles() useEffect(() => { const handleKeyPress = (event: KeyboardEvent) => { if (event.key === "Escape") { onClose() } } document.body.addEventListener("keydown", handleKeyPress, false) return () => { document.body.removeEventListener("keydown", handleKeyPress, false) } }, [onClose]) return ( ESC ) } const useStyles = makeStyles((theme) => ({ closeButton: { position: "fixed", top: theme.spacing(3), right: theme.spacing(6), opacity: 0.5, color: theme.palette.text.primary, "&:hover": { opacity: 1, }, }, label: { position: "absolute", left: "50%", top: "100%", transform: "translate(-50%, 50%)", }, }))