Merge pull request #47 from maheshj01/issue-16

Add a Copy Button to code Block
maheshj01 · Sep 5, 2024 · 39ff48b · 39ff48b
2 parents db59665 + 8db2694
commit 39ff48b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 18 deletions.
diff --git a/src/app/(main)/_components/CodeHighlight.tsx b/src/app/(main)/_components/CodeHighlight.tsx
@@ -1,9 +1,12 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DoneIcon from '@mui/icons-material/Done';
 import { useTheme } from 'next-themes';
+import { useState } from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { docco } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import IconButton from './IconButton';
 import { Theme } from './ThemeSwitcher';
-
 interface CodeBlockProps {
     language: string; // The programming language of the code block (e.g., 'javascript', 'python')
     children: string; // The code to be highlighted
@@ -16,24 +19,50 @@ interface CodeBlockProps {
  */
 const CodeBlock: React.FC<CodeBlockProps> = ({ language, children, ...rest }) => {
     const { theme } = useTheme();
+    const [copied, setCopied] = useState<boolean>(false);
+    const handleCopy = () => {
+        navigator.clipboard.writeText(children);
+        setCopied(true);
+        setTimeout(() => {
+            setCopied(false);
+        }, 2000);
+        console.log('Copied to Clipboard!');
+    }
     return (
-        <SyntaxHighlighter
-            customStyle={{
-                padding: '0.5em',
-                backgroundColor: 'var(--color-code-surface)',
-            }}
-            lineProps={{
-                style: {
-                    wordBreak: 'break-all', whiteSpace: 'pre-wrap', paddingBottom: 1
+        <div className='relative'>
+            <IconButton
+                className='absolute top-[-12px] right-[-12px]'
+                onClick={handleCopy}
+                ariaLabel="Copy to clipboard"
+            >{!copied ?
+                (<ContentCopyIcon
+                    className='w-5 h-5'
+                />)
+                :
+                (<DoneIcon
+                    className='w-5 h-5'
+                    color='success'
+                />)
                 }
-            }}
-            // wrapLines={true}
-            {...rest}
-            PreTag={'div'}
-            showLineNumbers={true}
-            language={language} style={theme == Theme.DARK ? a11yDark : docco}>
-            {children}
-        </SyntaxHighlighter>
+            </IconButton>
+            <SyntaxHighlighter
+                customStyle={{
+                    padding: '0.5em',
+                    backgroundColor: 'var(--color-code-surface)',
+                }}
+                lineProps={{
+                    style: {
+                        wordBreak: 'break-all', whiteSpace: 'pre-wrap', paddingBottom: 1
+                    }
+                }}
+                // wrapLines={true}
+                {...rest}
+                PreTag={'div'}
+                showLineNumbers={true}
+                language={language} style={theme == Theme.DARK ? a11yDark : docco}>
+                {children}
+            </SyntaxHighlighter>
+        </div>
     );
 };
 

diff --git a/src/app/(main)/_components/Sidebar.tsx b/src/app/(main)/_components/Sidebar.tsx
@@ -221,7 +221,7 @@ const Sidebar: React.FC = () => {
                     <IconButton
                         ariaLabel='Report a Bug'
                         onClick={() => {
-                            window.open(`${process.env.NEXT_PUBLIC_GITHUB_REPO}/issues/new` ?? '', '_blank');
+                            window.open(`${process.env.NEXT_PUBLIC_GITHUB_REPO}/issues/new`, '_blank');
                         }}
                     >
                         <FaBug className='size-6 text-black dark:text-white' />