docs: redesign footer (#8651)

www/packages/docs-ui/src/layouts/root.tsx

@@ -12,6 +12,8 @@ export type RootLayoutProps = {
   htmlClassName?: string
   bodyClassName?: string
   showPagination?: boolean
+  feedbackComponent?: React.ReactNode
+  editComponent?: React.ReactNode
 } & MainContentLayoutProps
 
 export const RootLayout = ({

www/packages/docs-ui/src/layouts/tight.tsx

@@ -6,6 +6,8 @@ import { Pagination } from ".."
 export const TightLayout = ({
   children,
   showPagination,
+  feedbackComponent,
+  editComponent,
   ...props
 }: RootLayoutProps) => {
   return (
@@ -19,7 +21,9 @@ export const TightLayout = ({
         )}
       >
         {children}
+        {feedbackComponent}
         {showPagination && <Pagination />}
+        {editComponent}
       </div>
     </RootLayout>
   )

www/packages/docs-ui/src/layouts/wide.tsx

@@ -6,6 +6,8 @@ import { Pagination } from ".."
 export const WideLayout = ({
   children,
   showPagination,
+  feedbackComponent,
+  editComponent,
   ...props
 }: RootLayoutProps) => {
   return (
@@ -16,11 +18,13 @@ export const WideLayout = ({
       <main
         className={clsx(
           "max-w-inner-content-xs sm:max-w-inner-content-sm md:max-w-inner-content-md",
-          "lg:max-w-wide-content relative mt-4 w-full flex-1 lg:mt-7"
+          "lg:max-w-lg-wide-content xl:max-w-xl-wide-content relative mt-4 w-full flex-1 lg:mt-7"
         )}
       >
         {children}
+        {feedbackComponent}
         {showPagination && <Pagination />}
+        {editComponent}
       </main>
     </RootLayout>
   )