fix copy code overlap (#70)
This commit is contained in:
		
							parent
							
								
									37c088a212
								
							
						
					
					
						commit
						972a5aff23
					
				|  | @ -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} | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue