docs: move edit date to footer (#11667)

* docs: move edit date to footer

* fix build error

www/apps/book/app/learn/layout.tsx

@@ -1,7 +1,6 @@
 import { TightLayout } from "docs-ui"
-import Feedback from "@/components/Feedback"
-import EditButton from "@/components/EditButton"
 import Providers from "../../providers"
+import Footer from "../../components/Footer"
 
 export default function RootLayout({
   children,
@@ -13,10 +12,8 @@ export default function RootLayout({
       sidebarProps={{
         expandItems: true,
       }}
-      showPagination={true}
-      feedbackComponent={<Feedback className="my-2" />}
-      editComponent={<EditButton />}
       ProvidersComponent={Providers}
+      footerComponent={<Footer />}
     >
       {children}
     </TightLayout>

www/apps/book/app/not-found.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { TightLayout } from "docs-ui"
-import Feedback from "../components/Feedback"
-import EditButton from "../components/EditButton"
 import NotFoundContent from "./_not-found.mdx"
 import Providers from "../providers"
+import Footer from "../components/Footer"
 
 const NotFoundPage = () => {
   return (
@@ -11,9 +10,7 @@ const NotFoundPage = () => {
       sidebarProps={{
         expandItems: true,
       }}
-      showPagination={true}
-      feedbackComponent={<Feedback className="my-2" />}
-      editComponent={<EditButton />}
+      footerComponent={<Footer />}
       ProvidersComponent={Providers}
     >
       {/* @ts-ignore React v19 doesn't recognize MDX import as component */}

www/apps/book/components/EditButton/index.tsx

@@ -2,13 +2,24 @@
 
 import { EditButton as UiEditButton } from "docs-ui"
 import { usePathname } from "next/navigation"
+import { useMemo } from "react"
+import { generatedEditDates } from "../../generated/edit-dates.mjs"
 
 const EditButton = () => {
   const pathname = usePathname()
 
+  const editDate = useMemo(
+    () =>
+      (generatedEditDates as Record<string, string>)[
+        `app${pathname.replace(/\/$/, "")}/page.mdx`
+      ],
+    [pathname]
+  )
+
   return (
     <UiEditButton
       filePath={`/www/apps/book/app${pathname.replace(/\/$/, "")}/page.mdx`}
+      editDate={editDate}
     />
   )
 }

www/apps/book/components/Footer/index.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { Footer as UiFooter } from "docs-ui"
+import Feedback from "../Feedback"
+import EditButton from "../EditButton"
+
+const Footer = () => {
+  return (
+    <UiFooter
+      showPagination={true}
+      feedbackComponent={<Feedback className="my-2" />}
+      editComponent={<EditButton />}
+    />
+  )
+}
+
+export default Footer

www/apps/book/providers/main-nav.tsx

@@ -6,15 +6,12 @@ import {
 } from "docs-ui"
 import { useMemo } from "react"
 import { config } from "../config"
-import { usePathname } from "next/navigation"
-import { generatedEditDates } from "../generated/edit-dates.mjs"
 
 type MainNavProviderProps = {
   children?: React.ReactNode
 }
 
 export const MainNavProvider = ({ children }: MainNavProviderProps) => {
-  const pathname = usePathname()
   const navigationDropdownItems = useMemo(
     () =>
       getNavDropdownItems({
@@ -23,16 +20,8 @@ export const MainNavProvider = ({ children }: MainNavProviderProps) => {
     []
   )
 
-  const editDate = useMemo(
-    () =>
-      (generatedEditDates as Record<string, string>)[
-        `app${pathname.replace(/\/$/, "")}/page.mdx`
-      ],
-    [pathname]
-  )
-
   return (
-    <UiMainNavProvider navItems={navigationDropdownItems} editDate={editDate}>
+    <UiMainNavProvider navItems={navigationDropdownItems}>
       {children}
     </UiMainNavProvider>
   )