added edit this page button

Author: fab-siciliano

src/components/EditThis.tsx

@@ -0,0 +1,21 @@
+import {useRouter} from 'next/router';
+import {ExternalLink} from './ExternalLink';
+import {IconGitHub} from './Icon/IconGitHub';
+
+const githubBranch = 'main';
+const baseGithubLink = `https://github.com/reactjs/react.dev/edit/${githubBranch}/`;
+
+export const EditThis = () => {
+  const {asPath} = useRouter();
+  const cleanedPath = asPath.split(/[\?\#]/)[0];
+  return (
+    <div className="flex text-link dark:text-link-dark group justify-start align-middle">
+      <IconGitHub />
+      <ExternalLink href={`${baseGithubLink}src/content/${cleanedPath}.md`}>
+        <span className="text-lg group-hover:underline">
+          Edit this page on Github
+        </span>
+      </ExternalLink>
+    </div>
+  );
+};

src/components/Layout/Page.tsx

@@ -21,6 +21,7 @@ import {HomeContent} from './HomeContent';
 import {TopNav} from './TopNav';
 import cn from 'classnames';
 import Head from 'next/head';
+import {EditThis} from 'components/EditThis';
 
 import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
 
@@ -88,6 +89,7 @@ export function Page({
               </LanguagesContext.Provider>
             </TocContext.Provider>
           </div>
+          {!isBlogIndex && <EditThis />}
           {!isBlogIndex && (
             <DocsPageFooter
               route={route}