Skip to content

Commit

Permalink
#188 Issues: Update ChapterPage.tsx VerseNavigator.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
ankitaniket committed Mar 2, 2024
1 parent b8f4211 commit 3fde8cf
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@ export default function ChapterPage({
: filteredVerses?.slice(0).reverse();

return (
<div>
<div
onClick={() => (viewNavigation && setViewNavigation(false))}>
<div className="absolute inset-x-0 mx-auto max-w-5xl text-center font-inter">
<SvgChapterBackground className="relative inset-x-0 bottom-0 m-auto w-full rounded-full text-gray-300 text-opacity-25 dark:text-black dark:text-opacity-25 lg:top-12 lg:w-min" />
</div>
Expand Down Expand Up @@ -86,8 +87,10 @@ export default function ChapterPage({
</p>
</section>

<div className="mx-auto max-w-5xl px-4 text-center font-inter sm:px-6">
<div className="flex items-center justify-between border-y border-gray-200 py-6">
<div className="mx-auto max-w-5xl px-4 text-center font-inter sm:px-6">
<div
className="flex items-center justify-between border-y border-gray-200 py-6"
>
<div
className={classNames(
"font-extrabold dark:text-white",
Expand Down Expand Up @@ -116,13 +119,14 @@ export default function ChapterPage({
<VerseNavigator
verseCount={verses_count}
currentVerse={verseId}
chapterNumber={chapter_number}
viewNavigation={viewNavigation}
setViewNavigation={setViewNavigation}
setVerseId={setVerseId}
/>
<button
type="button"
className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange dark:bg-dark-100 dark:text-gray-50 dark:hover:bg-dark-bg"
className="relative -ml-px inline-flex items-center space-x-0.5 rounded-r-md border border-gray-300 bg-gray-50 px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange dark:bg-dark-100 dark:text-gray-50 dark:hover:bg-dark-bg"
onClick={() => setIsAscSorted(!isAscSorted)}
>
{isAscSorted ? (
Expand Down
38 changes: 23 additions & 15 deletions src/components/Chapter/VerseNavigator.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import { Dispatch, SetStateAction } from "react";
import { useSelector } from "react-redux";

import LinkWithLocale from "components/LinkWithLocale";
import useMyStyles from "hooks/useMyStyles";
import { RootState } from "redux/reducers/rootReducer";
import { classNames } from "shared/functions";

interface Props {
verseCount: number;
currentVerse: number;
chapterNumber: number;
viewNavigation: boolean;
setViewNavigation: Dispatch<SetStateAction<boolean>>;
setVerseId: Dispatch<SetStateAction<number>>;
Expand All @@ -16,6 +18,7 @@ interface Props {
function VerseNavigator({
verseCount,
currentVerse,
chapterNumber,
viewNavigation,
setViewNavigation,
setVerseId,
Expand All @@ -27,7 +30,7 @@ function VerseNavigator({
<div
className={classNames(
fontSize === "large" ? "top-12" : "top-10",
`absolute flex w-full flex-wrap rounded border border-gray-200 bg-white p-3 shadow dark:border-dark-100 dark:bg-dark-bg ${
`absolute mt-2 flex w-full flex-wrap justify-center rounded border border-gray-200 bg-white py-1 shadow dark:border-dark-100 dark:bg-dark-bg ${
!viewNavigation && "hidden"
}`,
)}
Expand All @@ -38,7 +41,7 @@ function VerseNavigator({
setVerseId(0);
}}
className={classNames(
`m-px flex min-w-[2.5rem] items-center justify-center rounded p-2 hover:cursor-pointer hover:bg-my-orange hover:text-white ${
` flex min-w-[2.5rem] items-center justify-center rounded hover:cursor-pointer hover:bg-my-orange hover:text-white ${
!currentVerse && "bg-my-orange text-white"
}`,
styles.fontSize.para,
Expand All @@ -49,21 +52,26 @@ function VerseNavigator({
{Array(verseCount)
.fill(verseCount)
.map((_verse, index) => (
<div
onClick={() => {
setViewNavigation(false);
setVerseId(index + 1);
}}
<LinkWithLocale
key={index}
className={classNames(
`m-px flex min-w-[2.5rem] items-center justify-center rounded p-2 hover:cursor-pointer hover:bg-my-orange hover:text-white ${
index + 1 === currentVerse && "bg-my-orange text-white"
}`,
styles.fontSize.para,
)}
href={`/chapter/${chapterNumber}/verse/${index + 1}`}
prefetch={false}
>
{index + 1}
</div>
<div
onClick={() => {
setViewNavigation(false);
setVerseId(index + 1);
}}
className={classNames(
`flex min-w-[2.3rem] items-center justify-center rounded py-1 hover:cursor-pointer hover:border hover:bg-my-orange hover:text-white ${
index + 1 === currentVerse && "bg-my-orange text-white"
}`,
styles.fontSize.para,
)}
>
{index + 1}
</div>
</LinkWithLocale>
))}
</div>
);
Expand Down

0 comments on commit 3fde8cf

Please sign in to comment.