From c522e1450ad237623c097bdefd1c9eb5865fdb9b Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 1 Feb 2024 21:38:28 +0800
Subject: [PATCH] chore: update codeblock style

---
 web/src/components/MemoContent/CodeBlock.tsx | 31 ++++++++------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/web/src/components/MemoContent/CodeBlock.tsx b/web/src/components/MemoContent/CodeBlock.tsx
index f6916185..d816884e 100644
--- a/web/src/components/MemoContent/CodeBlock.tsx
+++ b/web/src/components/MemoContent/CodeBlock.tsx
@@ -1,4 +1,3 @@
-import { IconButton } from "@mui/joy";
 import classNames from "classnames";
 import copy from "copy-to-clipboard";
 import hljs from "highlight.js";
@@ -12,7 +11,7 @@ interface Props extends BaseProps {
 }
 
 const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
-  const formatedLanguage = (language || "").toLowerCase() || "plaintext";
+  const formatedLanguage = (language || "").toLowerCase() || "text";
   let highlightedCode = hljs.highlightAuto(content).value;
 
   // Users can set Markdown code blocks as `__html` to render HTML directly.
@@ -35,22 +34,18 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
   };
 
   return (
-    <pre className="w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-700 whitespace-pre-wrap relative">
-      <IconButton
-        size="sm"
-        className="!absolute top-0.5 right-0.5 opacity-50"
-        sx={{
-          "--IconButton-size": "24px",
-        }}
-        onClick={handleCopyButtonClick}
-      >
-        <Icon.Copy className="w-4 h-auto" />
-      </IconButton>
-      <code
-        className={classNames(`language-${formatedLanguage}`, "block text-sm")}
-        dangerouslySetInnerHTML={{ __html: highlightedCode }}
-      ></code>
-    </pre>
+    <div className="w-full my-1 bg-amber-100 border-l-4 border-amber-400 rounded overflow-clip hover:shadow dark:bg-zinc-600 dark:border-zinc-400">
+      <div className="w-full px-2 py-1 flex flex-row justify-between items-center text-amber-500 dark:text-zinc-400">
+        <span className="text-sm font-mono">{formatedLanguage}</span>
+        <Icon.Copy className="w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleCopyButtonClick} />
+      </div>
+      <pre className="w-full p-2 bg-amber-50 dark:bg-zinc-700 whitespace-pre-wrap relative">
+        <code
+          className={classNames(`language-${formatedLanguage}`, "block text-sm leading-5")}
+          dangerouslySetInnerHTML={{ __html: highlightedCode }}
+        ></code>
+      </pre>
+    </div>
   );
 };