nginx-proxy-manager/frontend/src/components/HelpDrawer/HelpDrawer.tsx

import { useEffect, useState } from "react";

import {
	Button,
	Drawer,
	DrawerContent,
	DrawerOverlay,
	DrawerBody,
	useDisclosure,
} from "@chakra-ui/react";
import { FiHelpCircle } from "react-icons/fi";
import ReactMarkdown from "react-markdown";

import { getLocale } from "src/locale";
import { getHelpFile } from "src/locale/src/HelpDoc";

interface HelpDrawerProps {
	/**
	 * Section to show
	 */
	section: string;
}
function HelpDrawer({ section }: HelpDrawerProps) {
	const { isOpen, onOpen, onClose } = useDisclosure();
	const [markdownText, setMarkdownText] = useState("");
	const lang = getLocale(true);

	useEffect(() => {
		try {
			const docFile = getHelpFile(lang, section) as any;
			fetch(docFile)
				.then((response) => response.text())
				.then(setMarkdownText);
		} catch (ex: any) {
			setMarkdownText(`**ERROR:** ${ex.message}`);
		}
	}, [lang, section]);

	return (
		<>
			<Button size="sm" onClick={onOpen}>
				<FiHelpCircle />
			</Button>
			<Drawer onClose={onClose} isOpen={isOpen} size="xl">
				<DrawerOverlay />
				<DrawerContent>
					<DrawerBody className="helpdoc-body">
						<ReactMarkdown>{markdownText}</ReactMarkdown>
					</DrawerBody>
				</DrawerContent>
			</Drawer>
		</>
	);
}

export { HelpDrawer };