feat: add react-syntax-highlighter and update JSDoc cheatsheet layout

Integrate react-syntax-highlighter for improved code example rendering and enhance the JSDoc cheatsheet layout with a new navigation structure and quick reference section.

components/SyntaxHighlighter.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
+
+interface SyntaxHighlighterProps {
+  code: string
+  language?: string
+}
+
+const CodeHighlighter = ({ code, language = "javascript" }: SyntaxHighlighterProps) => {
+  return (
+    <div className="rounded-lg overflow-hidden border border-slate-700">
+      <SyntaxHighlighter
+        language={language}
+        style={vscDarkPlus}
+        customStyle={{
+          background: '#0f172a',
+          borderRadius: '0.5rem',
+          fontSize: '0.875rem',
+          lineHeight: '1.6',
+          border: 'none',
+          margin: 0,
+          padding: '1rem',
+        }}
+        codeTagProps={{
+          style: {
+            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+          }
+        }}
+        showLineNumbers={false}
+        wrapLines={true}
+        wrapLongLines={true}
+        PreTag={({ children, ...props }) => (
+          <pre className="!m-0 !p-0" {...props}>
+            {children}
+          </pre>
+        )}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  )
+}
+
+export default CodeHighlighter