From a4a118ed5184303cb8c9c25ab669c9abb364949c Mon Sep 17 00:00:00 2001
From: mahesh jamdade <maheshmn121@gmail.com>
Date: Thu, 5 Sep 2024 14:53:22 -0400
Subject: [PATCH 1/2] Fix issue: #16

---
 src/app/(main)/_components/CodeHighlight.tsx | 60 ++++++++++++++------
 src/app/(main)/_components/Sidebar.tsx       |  2 +-
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/src/app/(main)/_components/CodeHighlight.tsx b/src/app/(main)/_components/CodeHighlight.tsx
index b482abf..10bcb1a 100644
--- 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,47 @@ 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-0 right-0'
+                onClick={handleCopy}
+                ariaLabel="Copy to clipboard"
+            >{!copied ?
+                (<ContentCopyIcon />)
+                :
+                (<DoneIcon
+                    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
index 5872bd7..219f7c1 100644
--- 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' />

From 8db2694d745746741cfa45c62cb700a4c6ebddf9 Mon Sep 17 00:00:00 2001
From: mahesh jamdade <maheshmn121@gmail.com>
Date: Thu, 5 Sep 2024 15:57:07 -0400
Subject: [PATCH 2/2] improve padding

---
 src/app/(main)/_components/CodeHighlight.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/(main)/_components/CodeHighlight.tsx b/src/app/(main)/_components/CodeHighlight.tsx
index 10bcb1a..4491110 100644
--- a/src/app/(main)/_components/CodeHighlight.tsx
+++ b/src/app/(main)/_components/CodeHighlight.tsx
@@ -31,13 +31,16 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ language, children, ...rest }) =>
     return (
         <div className='relative'>
             <IconButton
-                className='absolute top-0 right-0'
+                className='absolute top-[-12px] right-[-12px]'
                 onClick={handleCopy}
                 ariaLabel="Copy to clipboard"
             >{!copied ?
-                (<ContentCopyIcon />)
+                (<ContentCopyIcon
+                    className='w-5 h-5'
+                />)
                 :
                 (<DoneIcon
+                    className='w-5 h-5'
                     color='success'
                 />)
                 }