import React, { useState } from "react" import { Snackbar, IconButton } from "@material-ui/core" import { Close as CloseIcon } from "@material-ui/icons" import Copy from "../../assets/icons/Copy.svg" import styled from "@emotion/styled" import { copyToClipboard } from "../../helpers/utils" type Props = { codeSnippet: string } const CodeContainer = styled.div` display: flex; background: ${(props) => props.theme.palette.grey[200]}; padding: 0.5rem 1rem; border-radius: 0.125rem; ` const CodeSnippetContainer = styled.div` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ` const CopyIcon = styled.img` margin-left: 0.5rem; cursor: pointer; ` export default function CodeSnippetWithCopy({ codeSnippet }: Props) { const [openFeedback, setOpenFeedback] = useState(false) const handleCopyClick = () => { copyToClipboard(codeSnippet) if (!openFeedback) setOpenFeedback(true) } const handleClose = () => { setOpenFeedback(false) } const action = ( <> <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose} > <CloseIcon fontSize="small" /> </IconButton> </> ) return ( <div> <CodeContainer onClick={() => handleCopyClick()}> <CodeSnippetContainer>{codeSnippet}</CodeSnippetContainer> <CopyIcon src={Copy} /> <Snackbar anchorOrigin={{ vertical: "top", horizontal: "right" }} open={openFeedback} autoHideDuration={1} action={action} message="Command copied" /> </CodeContainer> </div> ) }