fix: type errors

src/element/markdown.tsx

@@ -1,38 +1,46 @@
 import "./markdown.css";
 
-import { createElement } from "react";
 import { useMemo } from "react";
 import ReactMarkdown from "react-markdown";
 
 import { HyperText } from "element/hypertext";
-import { transformText } from "element/text";
+import { transformText, type Fragment } from "element/text";
+import type { Tags } from "types";
 
 interface MarkdownProps {
   content: string;
-  tags?: string[];
+  tags?: Tags;
 }
 
-export function Markdown({
-  content,
-  tags = [],
-  element = "div",
-}: MarkdownProps) {
+interface LinkProps {
+  href?: string;
+  children?: Array<Fragment>;
+}
+
+interface ComponentProps {
+  children?: Array<Fragment>;
+}
+
+export function Markdown({ content, tags = [] }: MarkdownProps) {
   const components = useMemo(() => {
     return {
-      li: ({ children, ...props }) => {
+      li: ({ children, ...props }: ComponentProps) => {
         return children && <li {...props}>{transformText(children, tags)}</li>;
       },
-      td: ({ children }) =>
-        children && <td>{transformText(children, tags)}</td>,
-      p: ({ children }) => <p>{transformText(children, tags)}</p>,
-      a: (props) => {
-        return <HyperText link={props.href}>{props.children}</HyperText>;
+      td: ({ children }: ComponentProps) => {
+        return children && <td>{transformText(children, tags)}</td>;
+      },
+      p: ({ children }: ComponentProps) => {
+        return children && <p>{transformText(children, tags)}</p>;
+      },
+      a: ({ href, children }: LinkProps) => {
+        return href && <HyperText link={href}>{children}</HyperText>;
       },
     };
   }, [tags]);
-  return createElement(
-    element,
-    { className: "markdown" },
-    <ReactMarkdown components={components}>{content}</ReactMarkdown>,
+  return (
+    <div className="markdown">
+      <ReactMarkdown components={components}>{content}</ReactMarkdown>
+    </div>
   );
 }