Added a story text to the OBS editor (#17)

bible-technology · Sep 22, 2023 · fda3231 · fda3231
1 parent 92f6700
commit fda3231
Showing 1 changed file with 24 additions and 1 deletion.
diff --git a/renderer/src/components/EditorPage/ObsEditor/NavigationObs.js b/renderer/src/components/EditorPage/ObsEditor/NavigationObs.js
@@ -7,6 +7,8 @@ import {
 import {
   XMarkIcon,
   ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
 } from '@heroicons/react/24/solid';
 
 import styles from '../Navigation/reference/SelectReference.module.css';
@@ -65,7 +67,19 @@ export default function NavigationObs({ onChangeNumber, number }) {
     <>
       <div className="flex">
         <div className="bg-primary text-white py-2 uppercase tracking-wider text-xs font-semibold">
-          <span className="px-3">{number}</span>
+          <span
+            className="focus:outline-none bg-white py-4 bg-opacity-10"
+            onClick={selectBook}
+            role="button"
+            tabIndex="-1"
+            aria-label="obs-navigation"
+          >
+            <ChevronLeftIcon className="focus:outline-none inline h-4 w-4 mx-1 text-white" aria-hidden="true" />
+          </span>
+          <span className="px-3">
+            Story
+            {number}
+          </span>
           <span
             className="focus:outline-none bg-white py-4 bg-opacity-10"
             onClick={selectBook}
@@ -75,6 +89,15 @@ export default function NavigationObs({ onChangeNumber, number }) {
           >
             <ChevronDownIcon className="focus:outline-none inline h-4 w-4 mx-1 text-white" aria-hidden="true" />
           </span>
+          <span
+            className="focus:outline-none bg-white py-4 bg-opacity-10"
+            onClick={selectBook}
+            role="button"
+            tabIndex="-1"
+            aria-label="obs-navigation"
+          >
+            <ChevronRightIcon className="focus:outline-none inline h-4 w-4 mx-1 text-white" aria-hidden="true" />
+          </span>
         </div>
       </div>