import { useContext } from 'react' ; import contentCopyIcon from '!!raw-loader!../icons/content-copy.svg' ; import SvgIcon from '../icons/SVGIcon' ; import s from './CopyButton.module.css' ; import * as lib from '@hackage-ui/react-lib' ; export type CopyButtonProps = { analyticsId : string ; copyText : string ; displayText : string ; } ; export const CopyButton = ( props ) => { const appContext = useContext ( lib . appContext . AppContext ) ; return ( < div className = { s . copyButton } style = { props . displayText ? { } : { width : '32rem' , height : '32rem' , padding : '0' , justifyContent : 'center' } } onClick = { ( ) => { navigator . clipboard . writeText ( props . copyText ) ; appContext . analytics ?. gtag ( 'event' , `CopyButtonClicked-${ props . analyticsId }` ) ; appContext . notifySuccess ( 'Copied to clipboard!' ) ; } } > { props . displayText && < code className = { s . copyButtonText } > { props . displayText } < /code>} < div className = { s . copyButtonIcon } style = { props . displayText ? { } : { marginLeft : 0 , position : 'static' } } > < SvgIcon svg = { contentCopyIcon } /> < /div> < /div>); } ; export default CopyButton ;