From dfb870df0af96f2626144966ad54bf17b836e1d8 Mon Sep 17 00:00:00 2001
From: AyushShivhare79 <ayushshivhare1008@gmail.com>
Date: Wed, 21 Aug 2024 14:58:34 +0530
Subject: [PATCH] feat(refactor & style): code-block, code-text, copy-button

---
 apps/web/components/CodeBlock.module.css | 36 +++-------------
 apps/web/components/CodeBlock.tsx        | 54 +++++++++++++++---------
 apps/web/components/NotionRenderer.tsx   |  2 +-
 3 files changed, 39 insertions(+), 53 deletions(-)

diff --git a/apps/web/components/CodeBlock.module.css b/apps/web/components/CodeBlock.module.css
index 5f3fac2e..411e0e7e 100644
--- a/apps/web/components/CodeBlock.module.css
+++ b/apps/web/components/CodeBlock.module.css
@@ -1,4 +1,6 @@
 .code_block {
+    display: flex;
+    justify-content: space-between;
     position: relative;
     padding: 10px;
     font-size: 15px;
@@ -6,35 +8,7 @@
     white-space: pre-wrap;
     background: #020617;
     overflow: auto;
-    line-height: 1.6;
-    border: 1px solid #10b981;
-    border-left: 2px solid #b91c1c;
+    border: 2px solid #10b981;
+    border-left: 3px solid #3b82f6;
     color: #564;
-    min-width: 200px;
-    width: 800px;
-    display: flex;
-    justify-content: space-between;
-}
-
-.copy_block {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-}
-
-.copy_button {
-    position: relative;
-    cursor: pointer;
-    color: #fff;
-    background: gray;
-    border-radius: 0.5em;
-    padding: 2px 7px;
-    margin: 10px;
-}
-
-.copied_text {
-    background: #fff;
-    padding: 5px;
-    color: #161b22;
-    display: none;
-}
+}
\ No newline at end of file
diff --git a/apps/web/components/CodeBlock.tsx b/apps/web/components/CodeBlock.tsx
index 1292b41e..4f2af3cc 100644
--- a/apps/web/components/CodeBlock.tsx
+++ b/apps/web/components/CodeBlock.tsx
@@ -14,27 +14,39 @@ export default function CodeBlock({ block }: { block: any }) {
 
   const [showCopiedMessage, setShowCopiedMessage] = useState(false);
 
-  return (
-    <div className="max-w-full relative">
-      <div className={`${styles.copy_block} absolute top-2 right-2 z-10`}>
-        <button
-          className="text-gray-500 p-1 relative"
-          onClick={() => {
-            navigator.clipboard.writeText(code).then(() => {
-              setShowCopiedMessage(true);
-              setTimeout(() => {
-                setShowCopiedMessage(false);
-              }, 2000);
-            });
-          }}
-        >
-          {showCopiedMessage ? <CopyTick /> : <CopyIcon />}
-        </button>
-      </div>
-      <div className="max-w-full overflow-auto relative">
-        <pre className={`${styles.code_block} rounded-3xl px-4 sm:px-6 md:px-8`}>
-          <code className="language-javascript">{code}</code>
-        </pre>
+  return (  
+    <div>
+      <style>
+        {`
+          code[class*="language-"], pre[class*="language-"]{
+
+            font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;;
+            font-size: 5rem 
+            line-height: 2rem 
+          }
+        `}
+      </style>
+      <div className="max-w-full relative">
+        <div className="flex w-full justify-end pr-1 pt-1 z-10 absolute">
+          <button
+            className="text-slate-100"
+            onClick={() => {
+              navigator.clipboard.writeText(code).then(() => {
+                setShowCopiedMessage(true);
+                setTimeout(() => {
+                  setShowCopiedMessage(false);
+                }, 2000);
+              });
+            }}
+          >
+            {showCopiedMessage ? <CopyTick /> : <CopyIcon />}
+          </button>
+        </div>
+        <div className="max-w-full overflow-auto relative">
+          <pre className={`${styles.code_block} w-full px-4 sm:px-6 md:px-8`}>
+            <code className="language-javascript">{code}</code>
+          </pre>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/web/components/NotionRenderer.tsx b/apps/web/components/NotionRenderer.tsx
index 2e19ab25..5ef73c29 100644
--- a/apps/web/components/NotionRenderer.tsx
+++ b/apps/web/components/NotionRenderer.tsx
@@ -19,7 +19,7 @@ export const NotionRenderer = ({ recordMap }: { recordMap: any }) => {
             .dark-mode {
                   background: #111827;                
                   color: #ffffff
-                }
+                  }
             .notion-title{
                 font-family: open-montserrat;
                 font-size: xxx-large;