Add draft grid view

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

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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);