Merge pull request #598 from audioverse-org/bible-book-grid

Draft bible book grid

src/components/organisms/passageNavigation.module.scss

@@ -1,7 +1,6 @@
 @import '../../styles/common.scss';
 
 .wrapper {
-	display: flex;
 	background-color: $ts-bibleVersionH;
 }
 
@@ -24,12 +23,17 @@
 	padding-bottom: 16px;
 }
 
+// .wrapper .books:global(.grid) {
+// 	display: grid;
+// 	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+// }
+
 .wrapper li,
 .wrapper li button,
 .wrapper li a {
 	color: $ts-lightTone;
 	font-weight: 700;
-	size: 16px;
+	font-size: 16px;
 	line-height: 19.2px;
 	text-transform: uppercase;
 	list-style-type: none;
@@ -39,12 +43,20 @@
 	color: $ts-salmon;
 }
 
+.switch > :global(button.active) {
+	color: $ts-salmon;
+}
+
 .wrapper,
 .wrapper .books,
 .wrapper .chapters {
 	width: 100%;
 }
 
+// .books:global(.grid) .chapters {
+// 	grid-column: 1 / -1;
+// }
+
 .chapters {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
@@ -69,3 +81,30 @@
 .books button:hover {
 	color: $ts-salmon;
 }
+
+.switch {
+	border-bottom: 1px solid $ts-salmon;
+}
+
+.switch > button {
+	color: $ts-lightTone;
+	font-weight: 700;
+	font-size: 12px;
+	line-height: 14.4px;
+	text-transform: uppercase;
+}
+
+.chaptersWrapper {
+	width: 100%;
+	display: none;
+}
+
+.chaptersWrapper:global(.active) {
+	display: block;
+	float: left;
+}
+
+.books:global(.grid) .book {
+	width: 70px;
+	display: inline-block;
+}

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';
 
@@ -14,41 +14,72 @@ export default function PassageNavigation({ books }: Props): JSX.Element {
 	const [selectedBook, setSelectedBook] = useState<string | number | null>(
 		null,
 	);
+	const [selectedView, setSelectedView] = useState<'grid' | 'list'>('grid');
 
 	return (
 		<div className={styles.wrapper}>
-			<ul className={styles.books}>
+			<div className={styles.switch}>
+				<button
+					className={clsx({ active: selectedView === 'grid' })}
+					onClick={() => setSelectedView('grid')}
+				>
+					Grid
+				</button>
+				<button
+					className={clsx({ active: selectedView === 'list' })}
+					onClick={() => setSelectedView('list')}
+				>
+					List
+				</button>
+			</div>
+
+			<ul className={clsx(styles.books, { grid: selectedView === 'grid' })}>
 				{books.map((book) => {
 					const chapters = book.recordings.nodes;
+
 					return (
-						<li
-							key={book.id}
-							className={clsx(styles.book, {
-								active: book.id === selectedBook,
-							})}
-						>
-							<button
-								onClick={() => {
-									setSelectedBook(book.id);
-								}}
+						<>
+							<li
+								key={book.id}
+								className={clsx(styles.book, {
+									active: book.id === selectedBook,
+								})}
 							>
-								{book.title}
-							</button>
+								<button
+									onClick={() => {
+										setSelectedBook(book.id);
+									}}
+								>
+									{selectedView === 'grid'
+										? book.title.replace(' ', '').substring(0, 3)
+										: book.title}
+								</button>
+							</li>
 							{book.id === selectedBook ? (
-								<ul className={styles.chapters}>
-									{chapters?.map((chapter) => {
-										const n = Number(chapter.title.split(' ').pop());
-										return (
-											<li key={n} className={styles.chapter}>
-												<Link href={chapter.canonicalPath}>{n}</Link>
-											</li>
-										);
+								<li
+									className={clsx(styles.chaptersWrapper, {
+										active: book.id === selectedBook,
 									})}
-								</ul>
+								>
+									<ul
+										className={clsx(styles.chapters, {
+											active: book.id === selectedBook,
+										})}
+									>
+										{chapters?.map((chapter) => {
+											const n = Number(chapter.title.split(' ').pop());
+											return (
+												<li key={n} className={styles.chapter}>
+													<Link href={chapter.canonicalPath}>{n}</Link>
+												</li>
+											);
+										})}
+									</ul>
+								</li>
 							) : (
 								''
 							)}
-						</li>
+						</>
 					);
 				})}
 			</ul>