initial commit

components/topics/TopicContent.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { BlockNoteView } from '@blocknote/mantine'
+import { useCreateBlockNote } from '@blocknote/react'
+import { PartialBlock } from '@blocknote/core'
+import '@blocknote/mantine/style.css'
+import { useMemo } from 'react'
+
+interface TopicContentProps {
+  content: string
+  contentRTE?: unknown
+  className?: string
+}
+
+export function TopicContent({ content, contentRTE, className = '' }: TopicContentProps) {
+  // Create an editor instance with initial content
+  const editor = useCreateBlockNote({
+    initialContent:
+      contentRTE && Array.isArray(contentRTE) && contentRTE.length > 0
+        ? (contentRTE as PartialBlock[])
+        : ([{ type: 'paragraph', content: '' }] as PartialBlock[]),
+  })
+
+  // If we have rich text content, use BlockNote viewer
+  if (contentRTE && Array.isArray(contentRTE) && contentRTE.length > 0) {
+    return (
+      <div className={`topic-content ${className}`}>
+        <BlockNoteView editor={editor} editable={false} theme="light" />
+      </div>
+    )
+  }
+
+  // Fallback to rendering plain HTML content
+  return (
+    <div
+      className={`topic-content prose prose-lg max-w-none 
+        prose-headings:font-bold prose-headings:text-foreground
+        prose-p:text-muted-foreground prose-p:leading-relaxed
+        prose-a:text-primary prose-a:no-underline hover:prose-a:underline
+        prose-strong:text-foreground prose-strong:font-semibold
+        prose-code:bg-muted prose-code:px-2 prose-code:py-1 prose-code:rounded
+        prose-pre:bg-muted prose-pre:border prose-pre:rounded-lg
+        prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:bg-muted/50
+        prose-ul:text-muted-foreground prose-ol:text-muted-foreground
+        prose-li:text-muted-foreground
+        prose-img:rounded-lg prose-img:shadow-lg
+        ${className}`}
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
+  )
+}
+
+export default TopicContent