mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-16 09:11:38 +00:00
* add dark mode switch button * modify footer * fix nav menu opening issue * add paging number * remove post card a link focus shadow * add _document * remove archive card border on last child * add post image zoom margin on desktop * add post index image * remove TOC scroll bar on firefox
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { Button, useClipboard, useColorModeValue } from '@chakra-ui/react';
|
|
import { FC, MouseEventHandler, useEffect, useState } from 'react';
|
|
|
|
const CopyButton: FC = ({ children }) => {
|
|
const copyButtonTheme = useColorModeValue('teal', 'pink');
|
|
|
|
// Copy code
|
|
const [codeContent, setCodeContent] = useState('');
|
|
const { hasCopied, onCopy } = useClipboard(codeContent);
|
|
|
|
const copyCode: MouseEventHandler<HTMLButtonElement> = (e) => {
|
|
const target = e.target as HTMLButtonElement;
|
|
// Button is sibling with Code tag
|
|
const codeToCopy = target.nextElementSibling?.textContent;
|
|
codeToCopy && setCodeContent(codeToCopy);
|
|
};
|
|
useEffect(() => {
|
|
codeContent && onCopy();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [codeContent]);
|
|
|
|
return (
|
|
<>
|
|
<pre>
|
|
<Button
|
|
size="xs"
|
|
colorScheme={copyButtonTheme}
|
|
position="absolute"
|
|
top="5px"
|
|
right="5px"
|
|
onClick={copyCode}
|
|
>
|
|
{hasCopied ? 'COPYIED' : 'COPY'}
|
|
</Button>
|
|
{children}
|
|
</pre>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CopyButton;
|