import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
// Definir los componentes con tipos más específicos
const HeadingOne: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
{children}
);
const HeadingTwo: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
{children}
);
const HeadingThree: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
{children}
);
const HeadingFour: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
{children}
);
const HeadingFive: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
{children}
);
const HeadingSix: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
{children}
);
const List: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
);
const ListItem: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
{children}
);
const Link: React.FC<{ href?: string; children?: React.ReactNode }> = ({ href, children }) => (
{children}
);
const Paragraph: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
{children}
);
const MarkdownComponents: any = {
h1: HeadingOne,
h2: HeadingTwo,
h3: HeadingThree,
h4: HeadingFour,
h5: HeadingFive,
h6: HeadingSix,
a: Link,
p: Paragraph,
ul: List,
li: ListItem
};
const CustomMarkdown: React.FC<{ content: string; className?: string }> = ({ content, className }) => {
return (
{content}
);
};
export default CustomMarkdown;