clean layout

src/components/Layout.jsx

@@ -122,7 +122,7 @@ function useTableOfContents(tableOfContents) {
   return currentSection
 }
 
-export function LayoutDocs({ children, title, tableOfContents }) {
+export function Layout({ children, title, tableOfContents }) {
   let router = useRouter()
   let isHomePage = router.pathname === '/'
   let allLinks = navigation.flatMap((section) => section.links)

src/components/LayoutAPI.jsx

@@ -1,38 +0,0 @@
-import Link from 'next/link'
-import { motion } from 'framer-motion'
-
-import { Footer } from '@/components/Footer'
-import { Header } from '@/components/Header'
-import { Logo } from '@/components/Logo'
-import { NavigationAPI } from '@/components/NavigationAPI'
-import { Prose } from '@/components/Prose'
-import { SectionProvider } from '@/components/SectionProvider'
-
-export function LayoutAPI({ children, sections = [] }) {
-  return (
-    <SectionProvider sections={sections}>
-      <div className="lg:ml-72 xl:ml-80">
-        <motion.header
-          layoutScroll
-          className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
-        >
-          <div className="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:px-6 lg:pb-8 lg:pt-4 lg:dark:border-white/10 xl:w-80">
-            <div className="hidden lg:flex">
-              <Link href="/" aria-label="Home">
-                <Logo className="h-6" />
-              </Link>
-            </div>
-            <Header />
-            <NavigationAPI className="hidden lg:mt-10 lg:block" />
-          </div>
-        </motion.header>
-        <div className="relative px-4 pt-14 sm:px-6 lg:px-8">
-          <main className="py-16">
-            <Prose as="article">{children}</Prose>
-          </main>
-          <Footer />
-        </div>
-      </div>
-    </SectionProvider>
-  )
-}

src/pages/_app.jsx

@@ -2,13 +2,12 @@ import Head from 'next/head'
 import { Router, useRouter } from 'next/router'
 import { MDXProvider } from '@mdx-js/react'
 
-import { LayoutAPI } from '@/components/LayoutAPI'
 import * as mdxComponents from '@/components/mdx'
 import { useMobileNavigationStore } from '@/components/MobileNavigation'
 
 import '@/styles/tailwind.css'
 import 'focus-visible'
-import {LayoutDocs} from "@/components/LayoutDocs";
+import {Layout} from "@/components/Layout";
 import {slugifyWithCounter} from "@sindresorhus/slugify";
 
 function onRouteChange() {
@@ -33,9 +32,9 @@ export default function App({ Component, pageProps }) {
         <meta name="description" content={pageProps.description} />
       </Head>
       <MDXProvider components={mdxComponents}>
-          <LayoutDocs title={pageProps.title.toString()} tableOfContents={tableOfContents} {...pageProps}>
+          <Layout title={pageProps.title.toString()} tableOfContents={tableOfContents} {...pageProps}>
               <Component {...pageProps} />
-          </LayoutDocs>
+          </Layout>
       </MDXProvider>
     </>
   )