same mde editor in all admin forms

src/app/admin/_components/MdxEditorPreview.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { MDXRemote } from 'next-mdx-remote'
+import { serialize } from 'next-mdx-remote/serialize'
+import type { MDXRemoteSerializeResult } from 'next-mdx-remote'
+import { mdxComponents } from '~/components/mdx-components'
+
+export default function MdxEditorPreview(params: { source: string }) {
+  const [compiled, setCompiled] = useState<MDXRemoteSerializeResult | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    const timeout = window.setTimeout(() => {
+      void serialize(params.source, {
+        parseFrontmatter: false,
+        mdxOptions: {
+          remarkPlugins: [],
+          rehypePlugins: [],
+        },
+      })
+        .then((result) => {
+          if (cancelled) return
+          setCompiled(result)
+          setError(null)
+        })
+        .catch((nextError: unknown) => {
+          if (cancelled) return
+          setCompiled(null)
+          setError(nextError instanceof Error ? nextError.message : 'Failed to compile MDX preview')
+        })
+    }, 200)
+
+    return () => {
+      cancelled = true
+      window.clearTimeout(timeout)
+    }
+  }, [params.source])
+
+  if (error) {
+    return (
+      <div className='rounded-md border border-destructive/40 bg-destructive/10 p-4 text-sm text-destructive'>
+        {error}
+      </div>
+    )
+  }
+
+  if (!compiled) {
+    return <div className='text-muted-foreground p-4 text-sm'>Rendering preview...</div>
+  }
+
+  return (
+    <article className='prose dark:prose-invert max-w-none'>
+      <MDXRemote {...compiled} components={mdxComponents} />
+    </article>
+  )
+}