Add chapters after current book

audioverse-org · Dec 2, 2024 · 2a0009b · 2a0009b
1 parent 000868a
commit 2a0009b
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 38 deletions.
diff --git a/src/components/organisms/passageNavigation.module.scss b/src/components/organisms/passageNavigation.module.scss
@@ -25,7 +25,7 @@
 
 .wrapper .books:global(.grid) {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
 }
 
 .wrapper li,
@@ -53,6 +53,10 @@
 	width: 100%;
 }
 
+.books:global(.grid) .chapters {
+	grid-column: 1 / -1;
+}
+
 .chapters {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
@@ -90,3 +94,7 @@
 	text-transform: uppercase;
 	display: inline-block;
 }
+
+.chaptersWrapper {
+	grid-column: 1 / -1;
+}
diff --git a/src/components/organisms/passageNavigation.tsx b/src/components/organisms/passageNavigation.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 import Link from '~components/atoms/linkWithoutPrefetch';
 import root from '~src/lib/routes';
@@ -43,50 +43,54 @@ export default function PassageNavigation(props: Props): JSX.Element {
 				{BIBLE_BOOKS.map((book) => {
 					const chapters = getChapters(props.audiobibles, book);
 					return (
-						<li
-							key={book}
-							className={clsx(styles.book, { active: book === selectedBook })}
-						>
-							<button
-								onClick={() => {
-									setSelectedBook(book);
-								}}
+						<>
+							<li
+								key={book}
+								className={clsx(styles.book, { active: book === selectedBook })}
 							>
-								{selectedView === 'grid'
-									? book.replace(' ', '').substring(0, 3)
-									: book}
-							</button>
-							{book === selectedBook && selectedView === 'list' ? (
-								<ul className={styles.chapters}>
-									{chapters?.map(({ title }) => {
-										console.log('title', title);
-										const n = title.split(' ').pop()?.padStart(2, '0') ?? '';
-										return (
-											<li key={title} className={styles.chapter}>
-												<Link
-													href={root
-														.lang(languageRoute)
-														.bibles.bookId(
-															getBookId('Exodus', props.audiobibles) ?? '',
-														)
-														.chapterNumber(n)
-														.get()}
-												>
-													{n}
-												</Link>
+								<button
+									onClick={() => {
+										setSelectedBook(book);
+									}}
+								>
+									{selectedView === 'grid'
+										? book.replace(' ', '').substring(0, 3)
+										: book}
+								</button>
+							</li>
+							{book === selectedBook ? (
+								<li className={styles.chaptersWrapper}>
+									<ul className={styles.chapters}>
+										{chapters?.map(({ title }) => {
+											console.log('title', title);
+											const n = title.split(' ').pop()?.padStart(2, '0') ?? '';
+											return (
+												<li key={title} className={styles.chapter}>
+													<Link
+														href={root
+															.lang(languageRoute)
+															.bibles.bookId(
+																getBookId('Exodus', props.audiobibles) ?? '',
+															)
+															.chapterNumber(n)
+															.get()}
+													>
+														{n}
+													</Link>
 
-												{/*
+													{/*
 												example good link: /en/bibles/chapters/27015/exodus-1 
 												Current Linking: /en/bibles/20
 												*/}
-											</li>
-										);
-									})}
-								</ul>
+												</li>
+											);
+										})}
+									</ul>
+								</li>
 							) : (
 								''
 							)}
-						</li>
+						</>
 					);
 				})}
 			</ul>