diff --git a/src/js/components/common/CopyToClipboardButton.tsx b/src/js/components/common/CopyToClipboardButton.tsx index 78d5428d..9453c4e4 100644 --- a/src/js/components/common/CopyToClipboardButton.tsx +++ b/src/js/components/common/CopyToClipboardButton.tsx @@ -36,6 +36,13 @@ export interface CopyToClipboardButtonProps extends ButtonProps { timeout?: number } +const STATUS_MESSAGES: Record = { + [Status.INITIAL]: '', + [Status.PROGRESSING]: __('Copying to clipboard…', 'code-snippets'), + [Status.SUCCESS]: __('Copied to clipboard.', 'code-snippets'), + [Status.ERROR]: __('Failed to copy to clipboard. Please try again.', 'code-snippets') +} + export const CopyToClipboardButton: React.FC = ({ text, timeout = TIMEOUT, @@ -55,17 +62,27 @@ export const CopyToClipboardButton: React.FC = ({ .catch((error: unknown) => { console.error('Failed to copy text to clipboard.', error) setStatus(Status.ERROR) + setTimeout(() => setStatus(Status.INITIAL), timeout) }) } return clipboard && window.isSecureContext - ? + ? <> + + + {STATUS_MESSAGES[status]} + + : null }