ChapterPagination

Navigation component for guide chapters that displays previous and next chapter cards at the bottom of guide content.

Props

Usage

import ChapterPagination from '@/components/molecules/ChapterPagination';
import { getParentGuide } from '@/lib/contentstack';

// In a server component
const parentGuide = guide.chapter === true 
  ? await getParentGuide(path)
  : null;

<ChapterPagination
  guide={guide}
  parentGuide={parentGuide}
  currentPath={path}
/>

Features

• Previous/Next navigation: Shows clickable cards for previous and next chapters
• Main guide support: Shows main guide as "Previous" when viewing first chapter
• First chapter link: Shows first chapter as "Next" when viewing main guide
• Responsive layout: Single column on mobile, two columns on desktop
• Hover effects: Cards highlight with teal accent color on hover
• Title component: Uses Title atom with paragraph tag for semantic HTML

Behavior

For Main Guides (not chapters)

• Shows first chapter as "Next" card if viewing the main guide
• No "Previous" card shown (main guide is the starting point)

For Chapters

• Shows previous chapter as "Previous" card
• Shows next chapter as "Next" card
• Shows main guide as "Previous" when viewing the first chapter
• Only shows cards when there are chapters to navigate to

Rendering Logic

The component renders when:

• Guide has chapters (guide.chapters.length > 0)
• At least one navigation target exists (previous or next)

Returns null if:

• No chapters exist
• Neither previous nor next navigation targets exist

Navigation Card Structure

Each navigation card displays:

• Label: "Previous" or "Next" with directional arrow (← or →)
• Title: Chapter or guide title using Title component (as <p> tag)
• Description: Optional metadata description (if available)
• Link: Full card is clickable, navigates to chapter/guide URL

Styling

• Cards: bg-surface-2 with rounded corners, padding (p-4)
• Hover state: Border appears on hover (hover:border-border-strong), title color changes to teal accent
• Layout: CSS Grid with responsive columns (1 on mobile, 2 on desktop)
• Typography: Uses design system utilities (cs-h4, cs-h5, cs-xs-body)
• Right alignment: Next card content is right-aligned on desktop for visual balance

Notes

• Server-side component (can use async/await)
• Filters out chapters without URLs
• Uses Next.js Link for client-side navigation
• Uses Title atom component for consistent typography
• Positioned after guide content, before additional items (FAQ, Related Items)
• Handles edge cases (no chapters, first/last chapter, main guide)