Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(guide): add back and forward buttons #9513

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+54 −9
Open

feat(guide): add back and forward buttons #9513

Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4c1884c
feat(guide): add back and forward buttons
suneettipirneni May 4, 2023
f0bc7bf
Merge branch 'main' of https://github.com/discordjs/discord.js into f…
suneettipirneni May 4, 2023
1b82f83
fix: use cast
suneettipirneni May 4, 2023
ad457a2
fix: revert cast
suneettipirneni May 4, 2023
9c4aae3
Revert "fix: revert cast"
suneettipirneni May 4, 2023
36ff0c5
refactor: extract to component
suneettipirneni May 5, 2023
de32ed1
chore: cva issue
suneettipirneni May 5, 2023
d345ca6
chore: add missing file
suneettipirneni May 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
33 changes: 33 additions & 0 deletions apps/guide/src/app/guide/[...slug]/page.tsx
View file
Open in desktop
@@ -1,4 +1,7 @@
import { CgChevronLeft } from '@react-icons/all-files/cg/CgChevronLeft';
import { CgChevronRight } from '@react-icons/all-files/cg/CgChevronRight';
import { allContents } from 'contentlayer/generated';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { Mdx } from '~/components/Mdx';

Expand All @@ -8,6 +11,8 @@ export async function generateStaticParams() {

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();
Expand All @@ -16,6 +21,34 @@ export default function Page({ params }: { params: { slug: string[] } }) {
return (
<article className="max-w-none prose">
<Mdx code={content?.body.code ?? ''} />
<div className="mt-5 flex flex-col justify-between md:w-full md:flex-row space-y-2">
{previous ? (
<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={`/guide/${previous.slug}`}
>
<CgChevronLeft size={28} />
<div className="flex flex-col">
<p className="m-0 text-left text-lg font-bold">Previous Page</p>
<p className="m-0 text-gray-5 dark:text-gray-4">{previous.title}</p>
</div>
</Link>
) : (
<div /> // Note we use an empty div here to keep the spacing correct
)}
{next && (
<Link
className="flex flex-row items-center justify-end 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={`/guide/${next.slug}`}
>
<div className="flex flex-col">
<p className="m-0 text-right text-lg font-bold">Next Page</p>
<p className="m-0 text-right text-gray-5 dark:text-gray-4">{next.title}</p>
</div>
<CgChevronRight size={28} />
</Link>
)}
</div>
</article>
);
}