feat(refactor & style): code-block, code-text, copy-button

code100x · Aug 21, 2024 · dfb870d · dfb870d
1 parent 23e8eb9
commit dfb870d
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 53 deletions.
diff --git a/apps/web/components/CodeBlock.module.css b/apps/web/components/CodeBlock.module.css
@@ -1,40 +1,14 @@
 .code_block {
+    display: flex;
+    justify-content: space-between;
     position: relative;
     padding: 10px;
     font-size: 15px;
     word-wrap: break-word;
     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;
-}
+}
diff --git 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
@@ -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;