Skip to content

Commit

Permalink
wire up version selector
Browse files Browse the repository at this point in the history
  • Loading branch information
narthur committed Dec 3, 2024
1 parent 13b1be0 commit 489014e
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 15 deletions.
4 changes: 4 additions & 0 deletions src/containers/bible/index.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@
margin-left: auto;
}

.dropdownButton {
text-decoration: none;
}

.content {
display: flex;
flex-direction: column;
Expand Down
36 changes: 21 additions & 15 deletions src/containers/bible/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import clsx from 'clsx';
import React from 'react';
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';

import { BaseColors } from '~lib/constants';
Expand All @@ -17,12 +16,17 @@ import { getBibleAcronym } from '~src/lib/getBibleAcronym';
import { GetAudiobibleIndexDataQuery } from './__generated__';
import styles from './index.module.scss';

// export type BibleIndexProps = GetAudiobibleIndexDataQuery;
type Version = NonNullable<
GetAudiobibleIndexDataQuery['collections']['nodes']
>[0];

export type BibleIndexProps = {
data: NonNullable<GetAudiobibleIndexDataQuery['collections']['nodes']>;
data: Array<Version>;
};

function Bible({ data }: BibleIndexProps): JSX.Element {
console.log({ data });
const [selected, setSelected] = useState<Version>(data[0]);

return (
<Tease className={styles.base}>
<div className={styles.hat}>
Expand All @@ -32,12 +36,12 @@ function Bible({ data }: BibleIndexProps): JSX.Element {
</a>
<Dropdown
id="booksMenu"
trigger={({ isOpen, ...props }) => (
trigger={(props) => (
<Button
type="tertiary"
text="KJV"
text={getBibleAcronym(selected.title)}
IconRight={IconDisclosure}
className={clsx(isOpen && styles.buttonOpen)}
className={styles.dropdownButton}
{...props}
/>
)}
Expand All @@ -46,12 +50,14 @@ function Bible({ data }: BibleIndexProps): JSX.Element {
<div className={styles.dropdownContainer}>
{data.map((version) => (
<p key={version.id}>
<a
href={`https://www.example.com/${version.id}`}
onClick={handleClose}
>
{getBibleAcronym(version.title)}
</a>
<Button
type="tertiary"
onClick={() => {
setSelected(version);
handleClose();
}}
text={getBibleAcronym(version.title)}
/>
</p>
))}
</div>
Expand All @@ -68,7 +74,7 @@ function Bible({ data }: BibleIndexProps): JSX.Element {
</div>

<div className={styles.content}>
<PassageNavigation books={data[0].sequences.nodes || []} />
<PassageNavigation books={selected.sequences.nodes || []} />
</div>
</Tease>
);
Expand Down

0 comments on commit 489014e

Please sign in to comment.