fix copy code overlap (#70)

This commit is contained in:
Mckay Wrigley 2023-03-22 07:24:49 -06:00 committed by GitHub
parent 37c088a212
commit 972a5aff23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 4 deletions

View File

@ -9,20 +9,20 @@ interface Props {
}
export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
const [buttonText, setButtonText] = useState("Copy");
const [buttonText, setButtonText] = useState("Copy code");
const copyToClipboard = () => {
navigator.clipboard.writeText(value).then(() => {
setButtonText("Copied!");
setTimeout(() => {
setButtonText("Copy");
setButtonText("Copy code");
}, 2000);
});
};
return (
<div className="relative text-[16px]">
<div className="relative text-[16px] pt-2">
<SyntaxHighlighter
language={language}
style={lightMode === "light" ? oneLight : oneDark}
@ -31,7 +31,7 @@ export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
</SyntaxHighlighter>
<button
className="absolute top-2 right-2 text-white bg-blue-600 py-1 px-2 rounded focus:outline-none hover:bg-blue-700 text-sm"
className="absolute top-[-8px] right-[0px] text-white bg-none py-0.5 px-2 rounded focus:outline-none hover:bg-blue-700 text-xs"
onClick={copyToClipboard}
>
{buttonText}