51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import ReactMarkdown, { type Components } from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
|
|
import styles from "./MarkdownText.module.scss";
|
|
|
|
interface MarkdownTextProps {
|
|
content: string;
|
|
className?: string;
|
|
}
|
|
|
|
export default function MarkdownText({
|
|
content,
|
|
className,
|
|
}: MarkdownTextProps) {
|
|
const components: Components = {
|
|
h1: ({ ...props }) => <h1 className={styles.h1} {...props} />,
|
|
h2: ({ ...props }) => <h2 className={styles.h2} {...props} />,
|
|
h3: ({ ...props }) => <h3 className={styles.h3} {...props} />,
|
|
h4: ({ ...props }) => <h4 className={styles.h4} {...props} />,
|
|
h5: ({ ...props }) => <h5 className={styles.h5} {...props} />,
|
|
h6: ({ ...props }) => <h6 className={styles.h6} {...props} />,
|
|
p: ({ ...props }) => <p className={styles.paragraph} {...props} />,
|
|
li: ({ ...props }) => <li className={styles.listItem} {...props} />,
|
|
strong: ({ ...props }) => <strong className={styles.bold} {...props} />,
|
|
em: ({ ...props }) => <em className={styles.italic} {...props} />,
|
|
pre: ({ ...props }) => <pre className={styles.codeBlock} {...props} />,
|
|
// @ts-expect-error - inline prop is provided by react-markdown
|
|
code: ({ inline, ...props }) =>
|
|
inline ? (
|
|
<code className={styles.inlineCode} {...props} />
|
|
) : (
|
|
<code className={styles.code} {...props} />
|
|
),
|
|
blockquote: ({ ...props }) => <blockquote className={styles.blockquote} {...props} />,
|
|
hr: ({ ...props }) => <hr className={styles.hr} {...props} />,
|
|
a: ({ ...props }) => (
|
|
<a className={styles.link} target="_blank" rel="noopener noreferrer" {...props} />
|
|
),
|
|
};
|
|
|
|
return (
|
|
<div className={`${styles.markdown} ${className || ""}`}>
|
|
<ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
|
|
{content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
);
|
|
}
|