diff --git a/.dumi/theme/builtins/CopyButton.less b/.dumi/theme/builtins/CopyButton.less new file mode 100644 index 0000000..7d9f32b --- /dev/null +++ b/.dumi/theme/builtins/CopyButton.less @@ -0,0 +1,28 @@ +.my-code-block-copy-btn { + display: inline-block; + width: 16px; + height: 16px; + border: 0; + outline: none; + cursor: pointer; + opacity: 0.6; + transition: opacity 0.2s, background 0.2s; + + &:hover { + opacity: 0.8; + } + + &:active { + opacity: 0.9; + } + + &[data-status='ready'] { + background-position: -54px 0; + } + + &[data-status='copied'] { + opacity: 1; + pointer-events: none; + background-position: -54px -16px; + } +} diff --git a/.dumi/theme/builtins/CopyButton.tsx b/.dumi/theme/builtins/CopyButton.tsx new file mode 100644 index 0000000..bb3c919 --- /dev/null +++ b/.dumi/theme/builtins/CopyButton.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { useCopy } from 'dumi/theme'; +import './CopyButton.less'; + +export default (props: { content: string }) => { + const { content } = props; + const [copyCode, copyStatus] = useCopy(); + + return ( +