feat: enhance codeblock component with improved styling and additional language support

Author: pheralb

src/components/codeblock/copyToClipboard.tsx

@@ -35,7 +35,7 @@ const CopyToClipboardBtn = (props: CopyToClipboardBtnProps) => {
       onMouseEnter={() => controls.start("animate")}
       onMouseLeave={() => controls.start("normal")}
       onClick={() => handleCopy()}
-      className="text-neutral-500 transition-colors hover:text-black focus:outline-none dark:text-neutral-400 dark:hover:text-white"
+      className="text-neutral-500 cursor-pointer transition-colors hover:text-black focus:outline-none dark:text-neutral-400 dark:hover:text-white"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"

src/components/codeblock/mdx.tsx

@@ -1,8 +1,6 @@
-"use client";
-
-import { type HTMLProps } from "react";
-
+import type { HTMLProps } from "react";
 import { FileIcon } from "lucide-react";
+
 import CopyToClipboardBtn from "./copyToClipboard";
 import { Languages } from "./settings";
 
@@ -19,11 +17,14 @@ const CodeblockMDX = (props: PreProps) => {
   } = props;
   const selectedLanguage = Languages.find((lang) => lang.name === dataLanguage);
   return (
-    <div className="relative">
-      <div className="flex items-center justify-between rounded-t-md border-t border-r border-l border-neutral-200 px-1.5 py-1 dark:border-neutral-800 dark:bg-neutral-800/40">
+    <section className="not-prose pb-2">
+      <div className="flex items-center justify-between rounded-t-md border-t border-r border-l border-neutral-200 px-1.5 py-1 dark:border-neutral-800 dark:bg-neutral-800/40 bg-neutral-200/40">
         <div className="flex items-center space-x-2 text-neutral-500 dark:text-neutral-400">
           {selectedLanguage?.icon ? (
-            <selectedLanguage.icon className="h-[18px] w-[18px]" />
+            <selectedLanguage.icon
+              className="h-[18px] w-[18px]"
+              aria-description={dataLanguage}
+            />
           ) : (
             <FileIcon size={14} />
           )}
@@ -33,13 +34,10 @@ const CodeblockMDX = (props: PreProps) => {
         </div>
         <CopyToClipboardBtn content={rawstring || ""} />
       </div>
-      <pre
-        className="overflow-x-auto rounded-t-none bg-transparent"
-        {...props}
-      >
-        {children}
-      </pre>
-    </div>
+      <div className="max-h-64 overflow-y-auto rounded-b-md border border-neutral-200 p-3 dark:border-neutral-800">
+        <pre {...props}>{children}</pre>
+      </div>
+    </section>
   );
 };
 

src/components/codeblock/settings.ts

@@ -1,10 +1,14 @@
-import { Js, Reactts, Reactjs, Shell, TypeScript } from "@react-symbols/icons";
+import { Js, Reactts, Reactjs, Shell, TypeScript, BracketsBlue } from "@react-symbols/icons";
 
 export const Languages = [
   {
     name: "bash",
     icon: Shell,
   },
+  {
+    name: "shell",
+    icon: Shell,
+  },
   {
     name: "jsx",
     icon: Reactjs,
@@ -21,4 +25,8 @@ export const Languages = [
     name: "js",
     icon: Js,
   },
+  {
+    name: "css",
+    icon: BracketsBlue
+  }
 ];