feat: Add base project structure with API and web components

web/src/components/Markdown/Code.tsx

@@ -0,0 +1,87 @@
+import { type FC, useMemo } from 'react'
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import CopyBtn from './CopyBtn';
+import ReactEcharts from 'echarts-for-react';
+import Svg from './Svg'
+import MermaidChart from './MermaidChart'
+
+
+type ICodeProps = {
+  children: string;
+  className: string;
+}
+
+const Code: FC<ICodeProps> = (props) => {
+  const { children, className } = props;
+  const language = className?.split('-')[1]
+  console.log('Code', props)
+
+  const charData = useMemo(() => {
+    if (language !== 'echarts') return null;
+    try {
+      return JSON.parse(String(children).replace(/\n$/, ''))
+    } catch (error) {
+      console.error('Error parsing JSON for ECharts:', error)
+      return {"title":{"text":"ECharts error - Wrong JSON format."}}
+    }
+  }, [language, children])
+
+  if (language === 'echarts') {
+    return (
+      <ReactEcharts
+        option={charData}
+        style={{
+          height: '400px',
+          width: '100%',
+        }}
+      />
+    )
+  }
+
+  if (language === 'svg') {
+    return (
+      <Svg
+        content={children.replace(/\n/g, '')}
+      />
+    )
+  }
+  if (language === 'mermaid') {
+    return (
+      <MermaidChart
+        content={String(children).replace(/\n$/, '')}
+      />
+    )
+  }
+  
+  if (className) {
+    return (
+      <div className="rb:relative">
+        <SyntaxHighlighter
+          style={atelierHeathLight}
+          customStyle={{
+            padding: '16px 20px 16px 24px',
+            backgroundColor: '#F0F3F8',
+            borderRadius: 8,
+          }}
+          language={language}
+          showLineNumbers={false}
+          PreTag="div"
+        >
+          {children}
+        </SyntaxHighlighter>
+        <CopyBtn
+          value={children}
+          style={{
+          position: 'absolute',
+          top: 20,
+          right: 20,
+        }}
+      />
+    </div>
+    )
+  }
+  return <span className="rb:bg-[#F0F3F8] rb:px-1 rb:py-0.5 rb:rounded rb:text-sm rb:font-mono">{children}</span>
+}
+
+export default Code