import { Button , ButtonProps , useClipboard } from '@chakra-ui/react' ; import React from 'react' ; import { t } from 'utils/i18n' ; interface CopyButtonProps extends ButtonProps { code : string ; } function CopyButton ( { code , ... props } ) { const { hasCopied , onCopy } = useClipboard ( code ) ; return ( < Button size = 'sm' position = 'absolute' textTransform = 'uppercase' colorScheme = 'teal' fontSize = 'xs' height = '24px' top = { 0 } zIndex = '1' right = '1.25em' { ... props } onClick = { onCopy } > { hasCopied ? t ( 'component.mdx-components.copy-button.copied' ) : t ( 'component.mdx-components.copy-button.copy' ) } < /Button>); } export default CopyButton ;