From 1585505c3b98bd10a5256625aea26491060c9a5a Mon Sep 17 00:00:00 2001
From: Jake Coble <j@kecoble.com>
Date: Thu, 5 Dec 2024 11:07:00 -0500
Subject: [PATCH] Add missing components

---
 src/components/organisms/bookGrid.tsx     | 40 +++++++++++++++++++++++
 src/components/organisms/bookList.tsx     | 38 +++++++++++++++++++++
 src/components/organisms/bookSelector.tsx |  9 +++++
 src/components/organisms/chapterGrid.tsx  | 29 ++++++++++++++++
 4 files changed, 116 insertions(+)
 create mode 100644 src/components/organisms/bookGrid.tsx
 create mode 100644 src/components/organisms/bookList.tsx
 create mode 100644 src/components/organisms/bookSelector.tsx
 create mode 100644 src/components/organisms/chapterGrid.tsx

diff --git a/src/components/organisms/bookGrid.tsx b/src/components/organisms/bookGrid.tsx
new file mode 100644
index 000000000..57352341a
--- /dev/null
+++ b/src/components/organisms/bookGrid.tsx
@@ -0,0 +1,40 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { PassageNavigationFragment } from './__generated__/passageNavigation';
+import ChapterGrid from './chapterGrid';
+import styles from './passageNavigation.module.scss';
+
+type Props = {
+	books: Array<PassageNavigationFragment>;
+	selectedBook: string | number | null;
+	selectBook: (id: string | number | null) => void;
+};
+
+export default function BookGrid({ books, selectedBook, selectBook }: Props) {
+	return (
+		<ul className={clsx(styles.books, 'grid')}>
+			{books.map((book) => {
+				const chapters = book.recordings.nodes;
+
+				return (
+					<>
+						<li
+							key={book.id}
+							className={clsx(styles.book, {
+								active: book.id === selectedBook,
+							})}
+						>
+							<button onClick={() => selectBook(book.id)}>
+								{book.title.replace(' ', '').substring(0, 3)}
+							</button>
+						</li>
+						{book.id === selectedBook && chapters && (
+							<ChapterGrid chapters={chapters} />
+						)}
+					</>
+				);
+			})}
+		</ul>
+	);
+}
diff --git a/src/components/organisms/bookList.tsx b/src/components/organisms/bookList.tsx
new file mode 100644
index 000000000..a7ab35609
--- /dev/null
+++ b/src/components/organisms/bookList.tsx
@@ -0,0 +1,38 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { PassageNavigationFragment } from './__generated__/passageNavigation';
+import ChapterGrid from './chapterGrid';
+import styles from './passageNavigation.module.scss';
+
+type Props = {
+	books: Array<PassageNavigationFragment>;
+	selectedBook: string | number | null;
+	selectBook: (id: string | number | null) => void;
+};
+
+export default function BookList({ books, selectedBook, selectBook }: Props) {
+	return (
+		<ul className={clsx(styles.books)}>
+			{books.map((book) => {
+				const chapters = book.recordings.nodes;
+
+				return (
+					<>
+						<li
+							key={book.id}
+							className={clsx(styles.book, {
+								active: book.id === selectedBook,
+							})}
+						>
+							<button onClick={() => selectBook(book.id)}>{book.title}</button>
+						</li>
+						{book.id === selectedBook && chapters && (
+							<ChapterGrid chapters={chapters} />
+						)}
+					</>
+				);
+			})}
+		</ul>
+	);
+}
diff --git a/src/components/organisms/bookSelector.tsx b/src/components/organisms/bookSelector.tsx
new file mode 100644
index 000000000..b069fd9c0
--- /dev/null
+++ b/src/components/organisms/bookSelector.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { PassageNavigationFragment } from './__generated__/passageNavigation';
+
+type Props = {
+	books: Array<PassageNavigationFragment>;
+};
+
+export default function BookSelector({ books }: Props) {}
diff --git a/src/components/organisms/chapterGrid.tsx b/src/components/organisms/chapterGrid.tsx
new file mode 100644
index 000000000..99d02d770
--- /dev/null
+++ b/src/components/organisms/chapterGrid.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Link from '~components/atoms/linkWithoutPrefetch';
+
+import { PassageNavigationFragment } from './__generated__/passageNavigation';
+import styles from './passageNavigation.module.scss';
+
+type Chapter = NonNullable<PassageNavigationFragment['recordings']['nodes']>[0];
+
+type Props = {
+	chapters: Array<Chapter>;
+};
+
+export default function ChapterGrid({ chapters }: Props) {
+	return (
+		<li className={styles.chaptersWrapper}>
+			<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>
+					);
+				})}
+			</ul>
+		</li>
+	);
+}