components/MDX/EditButton.tsx

"use client";

import { GITHUB_REPO_URL, branch } from "@/utils/links";
import { Button } from "@mui/material";
import { usePathname } from "next/navigation";
import { MdEdit } from "react-icons/md";

export default function EditButton() {
    const pathname = usePathname();

    return (
        <Button
            className="desktop not-prose min-w-[0] absolute top-[14px] right-[20px] lg:right-0"
            style={{ minWidth: 0, position: "absolute" }}
            href={`${GITHUB_REPO_URL}/edit/${encodeURIComponent(
                branch,
            )}/docs/app${pathname === "/" ? "" : "/(docs)"}${pathname?.replace(
                /\.mdx?$/,
                "",
            )}${pathname === "/" ? "" : "/"}page.mdx`}
            target="_blank"
            rel="noreferrer"
        >
            <MdEdit size={20} />
        </Button>
    );
}
1	"use client";
2
3	import { GITHUB_REPO_URL, branch } from "@/utils/links";
4	import { Button } from "@mui/material";
5	import { usePathname } from "next/navigation";
6	import { MdEdit } from "react-icons/md";
7
8	export default function EditButton() {
9	const pathname = usePathname();
10
11	return (
12	<Button
13	className="desktop not-prose min-w-[0] absolute top-[14px] right-[20px] lg:right-0"
14	style={{ minWidth: 0, position: "absolute" }}
15	href={`${GITHUB_REPO_URL}/edit/${encodeURIComponent(
16	branch,
17	)}/docs/app${pathname === "/" ? "" : "/(docs)"}${pathname?.replace(
18	/\.mdx?$/,
19	"",
20	)}${pathname === "/" ? "" : "/"}page.mdx`}
21	target="_blank"
22	rel="noreferrer"
23	>
24	<MdEdit size={20} />
25	</Button>
26	);
27	}