Feature : prev and next navigation were added

app/minutes/[slug]/MinutesPage.tsx

@@ -7,19 +7,42 @@ const MinutesPage = ({
   contentHtml,
   title,
   modifiedAt,
+  prevSlug,
+  nextSlug,
 }: {
   contentHtml: string
   title: string
   modifiedAt: Date
+  prevSlug?: string
+  nextSlug?: string
 }) => {
   return (
     <>
-      <div className="max-w-3xl mx-auto pt-24">
+      <div className="max-w-3xl mx-auto pt-0">
         <p className="text-sm text-zinc-400">Meeting minutes</p>
-        <h1 className="font-tomorrow text-3xl text-left">{title}</h1>
-
+        <div className="flex items-center justify-between">
+          <h1 className="font-tomorrow text-3xl">{title}</h1>
+          <div className="flex gap-2">
+            {prevSlug && (
+              <a
+                className="text-primary font-space-mono bg-foreground px-5 py-2 rounded-sm border border-border"
+                href={`/minutes/${prevSlug}`}
+              >
+                &#8592;
+              </a>
+            )}
+            {nextSlug && (
+              <a
+                className="text-primary font-space-mono bg-foreground px-5 py-2 rounded-sm border border-border"
+                href={`/minutes/${nextSlug}`}
+              >
+                &#8594;
+              </a>
+            )}
+          </div>
+        </div>
         <div
-          className="flex items-center justify-between bg-foreground border-border border-2 px-4 py-2 rounded-sm -mx-4 my-4"
+          className="flex items-center justify-between bg-foreground border-border border-2 px-7 py-2 rounded-sm -mx-4 my-4"
           style={{ width: 'calc(100% + 1rem)' }}
         >
           <p className="text-md text-zinc-400">
@@ -45,6 +68,24 @@ const MinutesPage = ({
           dangerouslySetInnerHTML={{ __html: contentHtml }}
           className="minutes prose prose-invert"
         />
+        <nav className="navigation">
+          {prevSlug && (
+            <a
+              className="text-primary font-space-mono bg-foreground px-3 py-2 rounded-sm m-auto block border border-border my-4"
+              href={`/minutes/${prevSlug}`}
+            >
+              Previous
+            </a>
+          )}
+          {nextSlug && (
+            <a
+              className="text-primary font-space-mono bg-foreground px-3 py-2 rounded-sm m-auto block border border-border my-4"
+              href={`/minutes/${nextSlug}`}
+            >
+              Next
+            </a>
+          )}
+        </nav>
       </div>
     </>
   )

app/minutes/[slug]/page.tsx

@@ -24,12 +24,31 @@ export async function generateStaticParams() {
   }))
 }
 
-// Multiple versions of this page will be statically generated
 export default async function Page({ params }: { params: { slug: string } }) {
   const { slug } = params
-  // Read markdown file as string
-  const postDirectory = path.join(__dirname, '../../../../../constants/minutes')
-  const filePath = path.join(postDirectory, `${slug}.md`)
+
+  // Read markdown files
+  const postsDirectory = path.join(
+    __dirname,
+    '../../../../../constants/minutes'
+  )
+  const fileNames = fs
+    .readdirSync(postsDirectory)
+    .map((file) => file.replace(/\.md$/, ''))
+
+  // Sort filenames alphabetically
+  fileNames.sort()
+
+  // Determine previous and next slugs
+  const currentIndex = fileNames.indexOf(slug)
+  const prevSlug = currentIndex > 0 ? fileNames[currentIndex - 1] : undefined
+  const nextSlug =
+    currentIndex < fileNames.length - 1
+      ? fileNames[currentIndex + 1]
+      : undefined
+
+  // Read current markdown file
+  const filePath = path.join(postsDirectory, `${slug}.md`)
   const fileContents = fs.readFileSync(filePath, 'utf8')
 
   const fileStats = fs.statSync(filePath)
@@ -52,6 +71,8 @@ export default async function Page({ params }: { params: { slug: string } }) {
       contentHtml={contentHtml}
       title={slug}
       modifiedAt={modifiedAt}
+      prevSlug={prevSlug}
+      nextSlug={nextSlug}
     />
   )
 }

app/minutes/[slug]/styles.css

@@ -7,3 +7,24 @@
   font-size: 1.5em;
   margin-top: 24px;
 }
+
+.navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.navigation a {
+  flex: 1;
+  text-align: center;
+  margin: 0 0.5rem;
+}
+
+.navigation a:first-child {
+  margin-left: 0; /* Remove margin on the left for the first button */
+}
+
+.navigation a:last-child {
+  margin-right: 0; /* Remove margin on the right for the last button */
+}