fix(website): use static CodeBlock component in type table

Author: Rel1cx

apps/website/components/code-block.tsx

@@ -0,0 +1,23 @@
+import { highlight } from "fumadocs-core/highlight";
+import * as Base from "fumadocs-ui/components/codeblock";
+
+export interface CodeBlockProps {
+  code: string;
+  lang: string;
+  wrapper?: Base.CodeBlockProps;
+}
+
+export async function CodeBlock({ code, lang, wrapper }: CodeBlockProps) {
+  const rendered = await highlight(code, {
+    components: {
+      pre: Base.Pre,
+    },
+    lang,
+    themes: {
+      dark: "vesper",
+      light: "github-light",
+    },
+  });
+
+  return <Base.CodeBlock {...wrapper}>{rendered}</Base.CodeBlock>;
+}

apps/website/content/docs/configurations.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable perfectionist/sort-objects */
 import dedent from "dedent";
-import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
 import { TypeTable } from "fumadocs-ui/components/type-table";
 import { Link } from "next-view-transitions";
 
+import { CodeBlock } from "#/components/code-block";
+
 export function SettingsTypeTable() {
   return (
     <TypeTable
@@ -39,7 +40,7 @@ export function SettingsTypeTable() {
           description: <Link href="#additionalcomponents">An array of components and its attributes mapping ⤵</Link>,
           default: "[]",
           typeDescription: (
-            <DynamicCodeBlock
+            <CodeBlock
               code={dedent`
                 type CustomComponent = {
                   name: string;
@@ -60,7 +61,7 @@ export function SettingsTypeTable() {
           description: <Link href="#additionalhooks">An object of aliases for React built-in Hooks ⤵</Link>,
           default: "{}",
           typeDescription: (
-            <DynamicCodeBlock
+            <CodeBlock
               code={dedent`
                 type ReactBuiltInHookName =
                   | "use"