51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import Link from "next/link";
|
|
import { chapters } from "@/content/ebook";
|
|
|
|
type ChapterNavProps = {
|
|
chapterId: string;
|
|
};
|
|
|
|
export function ChapterNav({ chapterId }: ChapterNavProps) {
|
|
const index = chapters.findIndex((c) => c.id === chapterId);
|
|
if (index < 0) return null;
|
|
|
|
const prev = index > 0 ? chapters[index - 1] : null;
|
|
const next = index < chapters.length - 1 ? chapters[index + 1] : null;
|
|
|
|
return (
|
|
<nav
|
|
className="mt-12 flex flex-col gap-3 border-t border-[var(--border)] pt-8 sm:flex-row sm:justify-between"
|
|
aria-label="Previous and next chapter"
|
|
>
|
|
{prev ? (
|
|
<Link
|
|
href={`#${prev.id}`}
|
|
className="group glass-card flex flex-1 flex-col rounded-2xl px-5 py-4 transition-shadow hover:shadow-[var(--glow-sm)]"
|
|
>
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
|
|
← Previous
|
|
</span>
|
|
<span className="mt-1 font-medium group-hover:text-[var(--accent)]">
|
|
{prev.title}
|
|
</span>
|
|
</Link>
|
|
) : (
|
|
<div className="hidden flex-1 sm:block" />
|
|
)}
|
|
{next ? (
|
|
<Link
|
|
href={`#${next.id}`}
|
|
className="group glass-card flex flex-1 flex-col rounded-2xl px-5 py-4 text-left sm:text-right transition-shadow hover:shadow-[var(--glow-sm)]"
|
|
>
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
|
|
Next →
|
|
</span>
|
|
<span className="mt-1 font-medium group-hover:text-[var(--accent)]">
|
|
{next.title}
|
|
</span>
|
|
</Link>
|
|
) : null}
|
|
</nav>
|
|
);
|
|
}
|