import { type AnchorHTMLAttributes, type ComponentProps, type HTMLAttributes } from "react"; import Image from "next/image"; import Link from "next/link"; import { Alert, Button, Tooltip } from "@lemonsqueezy/wedges"; import { transformerNotationDiff } from "@shikijs/transformers"; import { fromHtmlIsomorphic } from "hast-util-from-html-isomorphic"; import { MDXRemote } from "next-mdx-remote/rsc"; import rehypeAutolinkHeadings from "rehype-autolink-headings"; import rehypePrettyCode, { type Options } from "rehype-pretty-code"; import rehypeSlug from "rehype-slug"; import remarkGfm from "remark-gfm"; import remarkSmartypants from "remark-smartypants"; import { rehypeAddPreviewCode, rehypeCopyCodePostProcess, rehypeCopyCodePreProcess, rehypeSourceRedirect, } from "@/lib/mdx/unist"; import { cn } from "@/lib/utils"; import { Colors } from "./Colors"; import { CopyButton } from "./CopyButton"; import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "./CustomTabs"; import { PreviewComponent } from "./PreviewComponent"; import { PropsTable } from "./PropsTable"; const prettyCodeOptions: Options = { defaultLang: { block: "tsx" }, grid: true, keepBackground: false, transformers: [transformerNotationDiff()], }; /* -------------------------------------------------------------------------- */ /* Components */ /* -------------------------------------------------------------------------- */ function CustomLink(props: AnchorHTMLAttributes) { const href = props.href; if (href?.startsWith("/")) { return ( {props.children} ); } if (href?.startsWith("#")) { return ; } return ; } function CustomCode(props: HTMLAttributes) { const { className, ...otherProps } = props; return (


  );
}

function CustomPre(props: HTMLAttributes & { raw?: string }) {
  const { children, className, raw, ...otherProps } = props;

  return (
          {children}
      {raw ?  : null}
    
  );
}

function LinkCard({ className, ...props }: React.ComponentProps) {
  return (
    p]:text-center",
        className
      )}
      {...props}
    />
  );
}

function Steps(props: HTMLAttributes) {
  return (
    
  );
}

export function CustomMDX(
  props: ComponentProps & {
    folderPath: string;
  }
) {
  const { folderPath } = props;

  const components = {
    a: CustomLink,
    code: CustomCode,
    pre: CustomPre,
    PropsTable,
    PreviewComponent,
    Alert,
    Button,
    Tabs: TabsRoot,
    TabsContent,
    TabsList,
    TabsTrigger,
    Tooltip,
    // Logomark: LemonSqueezyLogomark,
    Image: (props: ComponentProps) => ,
    Colors,
    LinkCard,
    Steps,
  };

  return (
    ',
                  { fragment: true }
                ).children,
              },
            ],

            [rehypePrettyCode, prettyCodeOptions],
            rehypeCopyCodePostProcess,
          ],
        },
      }}
      {...props}
    />
  );
}