KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/Markdown/CodeBlock.tsx
View File

@ -9,20 +9,20 @@ interface Props {
} }
export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => { export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
const [buttonText, setButtonText] = useState("Copy"); const [buttonText, setButtonText] = useState("Copy code");
const copyToClipboard = () => { const copyToClipboard = () => {
navigator.clipboard.writeText(value).then(() => { navigator.clipboard.writeText(value).then(() => {
setButtonText("Copied!"); setButtonText("Copied!");
setTimeout(() => { setTimeout(() => {
setButtonText("Copy"); setButtonText("Copy code");
}, 2000); }, 2000);
}); });
}; };
return ( return (
<div className="relative text-[16px]"> <div className="relative text-[16px] pt-2">
<SyntaxHighlighter <SyntaxHighlighter
language={language} language={language}
style={lightMode === "light" ? oneLight : oneDark} style={lightMode === "light" ? oneLight : oneDark}
@ -31,7 +31,7 @@ export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
</SyntaxHighlighter> </SyntaxHighlighter>
<button <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} onClick={copyToClipboard}
> >
{buttonText} {buttonText}