MarkdownContent.tsx38 lines · main

1	import { useEffect, useState } from 'react'
2
3	import { Markdown } from '@/components/interfaces/Markdown'
4
5	interface MarkdownContentProps {
6	content: string | null | undefined
7	integrationId?: string
8	}
9
10	export const MarkdownContent = ({
11	content: remoteContent,
12	integrationId,
13	}: MarkdownContentProps) => {
14	const [localContent, setLocalContent] = useState<string>('')
15
16	useEffect(() => {
17	// Reset on every id/remote change so navigating between integrations
18	// doesn't show the previous one's overview while the new import resolves.
19	setLocalContent('')
20
21	if (!integrationId || remoteContent) return
22
23	let cancelled = false
24	import(`@/static-data/integrations/${integrationId}/overview.md`)
25	.then((module) => {
26	if (!cancelled) setLocalContent(String(module.default))
27	})
28	.catch((error) => console.error('Error loading markdown:', error))
29
30	return () => {
31	cancelled = true
32	}
33	}, [integrationId, remoteContent])
34
35	const content = remoteContent || localContent
36
37	return <Markdown className="flex flex-col gap-y-4 text-foreground-light">{content}</Markdown>
38	}