markdown stuff

package.json

@@ -22,6 +22,7 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.7.1",
     "react-markdown": "^8.0.7",
+    "react-syntax-highlighter": "^15.5.0",
     "sharp": "^0.32.1"
   },
   "devDependencies": {

src/app/search/web/page.jsx

@@ -1,6 +1,7 @@
 "use client"
 import { useEffect, useState } from "react";
 import { MemoizedReactMarkdown } from '../../../components/MemoizedReactMarkdown'
+import { CodeBlock } from '../../../components/CodeBlock';
 
 export default function WebSearchPage({ searchParams }) {
   const [aiResponse, setAiResponse] = useState("");
@@ -48,7 +49,7 @@ export default function WebSearchPage({ searchParams }) {
   console.log(aiResponse);
 
   return (
-      <div className="flex flex-row">
+      <div style={{ padding: "20px" }} className="flex flex-row">
         <MemoizedReactMarkdown
           className="prose dark:prose-invert flex-1"
           components={{

src/components/CodeBlock.jsx

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+export const CodeBlock = memo(({ language, value }) => {
+
+  return (
+    <div className="codeblock relative font-sans text-[16px]">
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        customStyle={{ margin: 0 }}
+      >
+        {value}
+      </SyntaxHighlighter>
+    </div>
+  );
+});
+CodeBlock.displayName = 'CodeBlock';

src/components/SearchHeader.jsx

@@ -1,31 +1,12 @@
 import Image from "next/image";
-import Link from "next/link";
 import SearchBox from "./SearchBox";
-import { RiSettings3Line } from "react-icons/ri";
-import { TbGridDots } from "react-icons/tb";
 import SearchHeaderOptions from "./SearchHeaderOptions";
 
 export default function SearchHeader() {
   return (
     <header className="sticky top-0 bg-white">
       <div className="flex w-full p-6 items-center justify-between">
-        <Link href={"/"}>
-          <Image
-            width="120"
-            height="40"
-            src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png"
-          />
-        </Link>
-        <div className="flex-1">
-          <SearchBox />
-        </div>
-        <div className="hidden md:inline-flex space-x-2 ">
-          <RiSettings3Line className="header-icon" />
-          <TbGridDots className="header-icon" />
-        </div>
-        <button className="bg-blue-500 text-white px-6 py-2 font-medium rounded-md hover:brightness-105 hover:shadow-md transition-all ml-2">
-          Sign in
-        </button>
+        <SearchBox />
       </div>
       <SearchHeaderOptions />
     </header>