From f1b56190c533bf9d5316280418c57cf783951ccb Mon Sep 17 00:00:00 2001
From: Aaron Pettengill <pettengill.aaron@gmail.com>
Date: Fri, 14 Jun 2024 17:42:48 -0400
Subject: [PATCH] feat: footer

---
 apps/docs-v2/app/routes/_docs.tsx         |  2 +
 apps/docs-v2/app/ui/layout/Footer.tsx     | 58 +++++++++++++++++++++++
 apps/docs-v2/app/ui/layout/Navigation.tsx |  1 +
 3 files changed, 61 insertions(+)
 create mode 100644 apps/docs-v2/app/ui/layout/Footer.tsx

diff --git a/apps/docs-v2/app/routes/_docs.tsx b/apps/docs-v2/app/routes/_docs.tsx
index 8b8b2f52..71ea2d31 100644
--- a/apps/docs-v2/app/routes/_docs.tsx
+++ b/apps/docs-v2/app/routes/_docs.tsx
@@ -1,6 +1,7 @@
 import { Link, Outlet } from "@remix-run/react";
 import { motion } from "framer-motion";
 import { Logo } from "~/ui/branding/Logo";
+import { Footer } from "~/ui/layout/Footer";
 import { Header } from "~/ui/layout/Header";
 import { Navigation } from "~/ui/layout/Navigation";
 
@@ -26,6 +27,7 @@ export default function DocsLayout() {
           <main className="flex-auto">
             <Outlet />
           </main>
+          <Footer />
         </div>
       </div>
     </div>
diff --git a/apps/docs-v2/app/ui/layout/Footer.tsx b/apps/docs-v2/app/ui/layout/Footer.tsx
new file mode 100644
index 00000000..51275e69
--- /dev/null
+++ b/apps/docs-v2/app/ui/layout/Footer.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { Link, useLocation } from "@remix-run/react";
+import { navigation } from "./Navigation";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+
+const flatNavLinks = navigation.flatMap((item) => item.links);
+
+function PageNavigation() {
+  const location = useLocation();
+
+  const currentPageIndex = flatNavLinks.findIndex(
+    (link) => link.href === location.pathname,
+  );
+  const prevPage = flatNavLinks[currentPageIndex - 1];
+  const nextPage = flatNavLinks[currentPageIndex + 1];
+
+  if (!prevPage && !nextPage) {
+    return null;
+  }
+
+  return (
+    <div className="flex border-t border-zinc-900/10 pt-8 dark:border-white/10">
+      {prevPage && (
+        <div className="flex flex-col items-end gap-3">
+          <Link
+            to={prevPage.href}
+            className="flex items-center gap-2"
+            prefetch="intent"
+          >
+            <ArrowLeftIcon className="h-4 w-4" />
+            <span>{prevPage.title}</span>
+          </Link>
+        </div>
+      )}
+      {nextPage && (
+        <div className="flex flex-col items-start gap-3 ml-auto">
+          <Link
+            to={nextPage.href}
+            className="flex items-center gap-2 ml-auto"
+            prefetch="intent"
+          >
+            <span>{nextPage.title}</span>
+            <ArrowRightIcon className="h-4 w-4" />
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function Footer() {
+  return (
+    <footer className="mx-auto w-full max-w-2xl space-y-10 pb-16 lg:max-w-5xl">
+      <PageNavigation />
+    </footer>
+  );
+}
diff --git a/apps/docs-v2/app/ui/layout/Navigation.tsx b/apps/docs-v2/app/ui/layout/Navigation.tsx
index 86ceedee..0fd97adb 100644
--- a/apps/docs-v2/app/ui/layout/Navigation.tsx
+++ b/apps/docs-v2/app/ui/layout/Navigation.tsx
@@ -6,6 +6,7 @@ import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
 import { cn } from "~/lib/utils";
 import { useMobileNavigationStore } from "./MobileNavigation";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 
 interface NavGroup {
   title: string;