From 000868ac137c51c9a1586f64755b89406698718c Mon Sep 17 00:00:00 2001
From: Jake Coble <j@kecoble.com>
Date: Mon, 2 Dec 2024 16:03:37 -0500
Subject: [PATCH] Add draft grid view

---
 src/components/organisms/passageNavigation.module.scss | 5 +++++
 src/components/organisms/passageNavigation.tsx         | 9 ++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/organisms/passageNavigation.module.scss b/src/components/organisms/passageNavigation.module.scss
index d7454de13..ca53fb8c3 100644
--- a/src/components/organisms/passageNavigation.module.scss
+++ b/src/components/organisms/passageNavigation.module.scss
@@ -23,6 +23,11 @@
 	padding-bottom: 16px;
 }
 
+.wrapper .books:global(.grid) {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+}
+
 .wrapper li,
 .wrapper li button,
 .wrapper li a {
diff --git a/src/components/organisms/passageNavigation.tsx b/src/components/organisms/passageNavigation.tsx
index dff1866b0..74b6102a8 100644
--- a/src/components/organisms/passageNavigation.tsx
+++ b/src/components/organisms/passageNavigation.tsx
@@ -38,7 +38,8 @@ export default function PassageNavigation(props: Props): JSX.Element {
 					List
 				</button>
 			</div>
-			<ul className={styles.books}>
+
+			<ul className={clsx(styles.books, { grid: selectedView === 'grid' })}>
 				{BIBLE_BOOKS.map((book) => {
 					const chapters = getChapters(props.audiobibles, book);
 					return (
@@ -51,9 +52,11 @@ export default function PassageNavigation(props: Props): JSX.Element {
 									setSelectedBook(book);
 								}}
 							>
-								{book}
+								{selectedView === 'grid'
+									? book.replace(' ', '').substring(0, 3)
+									: book}
 							</button>
-							{book === selectedBook ? (
+							{book === selectedBook && selectedView === 'list' ? (
 								<ul className={styles.chapters}>
 									{chapters?.map(({ title }) => {
 										console.log('title', title);