feat(guide): add back and forward buttons

apps/guide/src/app/guide/[...slug]/page.tsx

@@ -1,13 +1,16 @@
 import { allContents } from 'contentlayer/generated';
 import { notFound } from 'next/navigation';
 import { Mdx } from '~/components/Mdx';
+import { PageButton } from '~/components/PageButton';
 
 export async function generateStaticParams() {
 	return allContents.map((content) => ({ slug: [content.slug] }));
 }
 
 export default function Page({ params }: { params: { slug: string[] } }) {
 	const content = allContents.find((content) => content.slug === params.slug?.join('/'));
+	const next = content ? allContents[(allContents.indexOf(content) as number) + 1] : null;
+	const previous = content ? allContents[(allContents.indexOf(content) as number) - 1] : null;
 
 	if (!content) {
 		notFound();
@@ -16,6 +19,14 @@ export default function Page({ params }: { params: { slug: string[] } }) {
 	return (
 		<article className="max-w-none prose">
 			<Mdx code={content?.body.code ?? ''} />
+			<div className="mt-10 flex flex-col justify-between md:w-full md:flex-row sm:space-y-2">
+				{previous ? (
+					<PageButton direction="prev" href={`/guide/${previous.slug}`} title={previous.title} />
+				) : (
+					<div /> // Note we use an empty div here to keep the spacing correct
+				)}
+				{next ? <PageButton direction="next" href={`/guide/${next.slug}`} title={next.title} /> : null}
+			</div>
 		</article>
 	);
 }

apps/guide/src/components/PageButton.tsx

@@ -1,13 +1,27 @@
-export function PageButton({ url, title, direction }: { direction: 'next' | 'prev'; title: string; url: string }) {
+import { CgChevronLeft } from '@react-icons/all-files/cg/CgChevronLeft';
+import { CgChevronRight } from '@react-icons/all-files/cg/CgChevronRight';
+import Link from 'next/link';
+
+export interface PageButtonProps {
+	direction: 'next' | 'prev';
+	href: string;
+	title: string;
+}
+
+export function PageButton({ href, title, direction }: PageButtonProps) {
+	const isNext = direction === 'next';
+	const textAlignStyle = isNext ? 'text-right' : 'text-left';
 	return (
-		<a
-			className="flex flex-row flex-col transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 rounded bg-light-600 px-4 py-3 leading-none no-underline outline-none active:translate-y-px active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
-			href={url}
+		<Link
+			className="flex flex-row items-center rounded-lg bg-gray-200 px-3 py-2 text-black space-x-2 dark:bg-dark-200 hover-bg-gray-300 dark:text-white dark:hover:bg-dark-100"
+			href={href}
 		>
-			<h3 className="text-md font-semibold">{title}</h3>
-			<p className={`${direction === 'next' ? 'ml-auto' : 'mr-auto'} text-sm text-gray-600 dark:text-gray-400`}>
-				{direction === 'next' ? 'Next Page' : 'Previous Page'}
-			</p>
-		</a>
+			{isNext ? null : <CgChevronLeft size={28} />}
+			<div className="flex flex-col">
+				<p className={`m-0 ${textAlignStyle} text-lg font-bold`}>{isNext ? 'Next' : 'Previous'}</p>
+				<p className={`m-0 ${textAlignStyle} text-gray-5 dark:text-gray-4`}>{title}</p>
+			</div>
+			{isNext ? <CgChevronRight size={28} /> : null}
+		</Link>
 	);
 }

packages/ui/package.json

@@ -48,6 +48,7 @@
 	"dependencies": {
 		"@react-icons/all-files": "^4.1.0",
 		"ariakit": "^2.0.0-next.44",
+		"class-variance-authority": "^0.6.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},

packages/ui/src/lib/components/Test.tsx

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority';
+
+export const buttonVariants = cva(
+	'h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center rounded px-6 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white gap-2',
+	{
+		variants: {
+			variant: {
+				primary: 'bg-blurple text-white border-0',
+				secondary:
+					'bg-white text-gray-800 border-gray-400 border border-light-900 text-black transition duration-200 active:translate-y-px dark:border-dark-100 hover:border-black active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300',
+			},
+		},
+		defaultVariants: {
+			variant: 'primary',
+		},
+	},
+);

packages/ui/src/lib/index.ts

@@ -12,3 +12,4 @@ export * from './components/discord/MessageEmbedTitle.js';
 export * from './components/discord/MessageInteraction.js';
 export * from './components/discord/MessageReply.js';
 export * from './components/discord/Messages.js';
+export * from './styles/Test.jsx';

yarn.lock

@@ -2393,6 +2393,7 @@ __metadata:
     "@vitest/coverage-c8": ^0.30.1
     ariakit: ^2.0.0-next.44
     chromatic: ^6.17.3
+    class-variance-authority: ^0.6.0
     cross-env: ^7.0.3
     eslint: ^8.39.0
     eslint-config-neon: ^0.1.46