feat: footer nav back and forth

SquiggleTools · Feb 20, 2024 · 6918101 · 6918101
1 parent d32b43d
commit 6918101
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 1 deletion.
diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
@@ -0,0 +1,24 @@
+import { Link } from "@remix-run/react";
+import React from "react";
+
+import { HeroHeading } from "~/HeroHeading";
+
+export interface LayoutProps extends React.PropsWithChildren {
+	back?: boolean;
+	title: string;
+}
+
+export function Layout({ back, children, title }: LayoutProps) {
+	return (
+		<div>
+			<main>
+				<HeroHeading>{title}</HeroHeading>
+				{back && <Link to="/">Boston TS ⬅️</Link>}
+				{children}
+			</main>
+			<footer>
+				<Link to="/about">About</Link>
+			</footer>
+		</div>
+	);
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -23,7 +23,6 @@ export default function App() {
 				<Links />
 			</head>
 			<body>
-				<HeroHeading>Boston TypeScript</HeroHeading>
 				<Outlet />
 
 				<Scripts />

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -0,0 +1,5 @@
+import { Layout } from "~/components/Layout";
+
+export default function Index() {
+	return <Layout title="Boston TypeScript">Hello, world!</Layout>;
+}
diff --git a/app/routes/about.tsx b/app/routes/about.tsx
@@ -0,0 +1,9 @@
+import { Layout } from "~/components/Layout";
+
+export default function About() {
+	return (
+		<Layout back title="About">
+			Hello, world!
+		</Layout>
+	);
+}