Files
docs.tutoraddons.com/components/markdown/mdx-provider.tsx
Wildan Nursahidan 3da46325cf docu v 1.11.0
2025-05-26 23:03:58 +07:00

30 lines
760 B
TypeScript

'use client';
import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc';
import { Kbd } from './KeyboardMdx';
// Define components mapping
const components = {
// Keyboard components
Kbd: Kbd as React.ComponentType<React.HTMLAttributes<HTMLElement> & { type?: 'window' | 'mac' }>,
kbd: Kbd as React.ComponentType<React.HTMLAttributes<HTMLElement> & { type?: 'window' | 'mac' }>,
};
interface MDXProviderWrapperProps {
source: string;
}
export function MDXProviderWrapper({ source }: MDXProviderWrapperProps) {
return (
<div className="prose dark:prose-invert max-w-none">
<MDXRemote
source={source}
components={components}
options={{
parseFrontmatter: true,
}}
/>
</div>
);
}