feat: show transliteration per word

src/components/TopBar/DeveloperUtility/AutoScroll.tsx

@@ -3,19 +3,13 @@
 import React, { useEffect, useState } from 'react';
 import AdjustmentWrapper from './AdjustmentWrapper';
 import useSettings from '../../../store/settingsStore';
-import classNames from 'classnames';
 import { OptionButton } from './OptionList';
 
 const AutoScroll = () => {
   const { autoScroll, setAutoScroll } = useSettings((state) => ({
     autoScroll: state.autoScroll,
     setAutoScroll: state.setAutoScroll,
   }));
-  const [isChecked, setChecked] = useState(false);
-
-  useEffect(() => {
-    setChecked(!!autoScroll);
-  }, [autoScroll]);
 
   return (
     <AdjustmentWrapper title="Scroll Otomatis">

src/components/TopBar/DeveloperUtility/DeveloperUtility.tsx

@@ -7,6 +7,7 @@ import IconWrapper from '../../icons/IconWrapper';
 import AutoScroll from './AutoScroll';
 import { FontAdjustment, FontSizeAdjustment } from './FontAdjustment';
 import ThemeAdjustment from './ThemeAdjustment';
+import Transliteration from './Transliteration';
 
 type DeveloperUtilityProps = {
   isInSurah?: boolean;
@@ -45,6 +46,7 @@ const DeveloperUtility = ({ isInSurah }: DeveloperUtilityProps) => {
             <FontAdjustment />
             <FontSizeAdjustment />
             <AutoScroll />
+            <Transliteration />
           </>
         )}
       </div>

src/components/TopBar/DeveloperUtility/Transliteration.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import AdjustmentWrapper from './AdjustmentWrapper';
+import { shallow } from 'zustand/shallow';
+import useSettings from '@stores/settingsStore';
+
+type Props = {};
+
+const Transliteration = (props: Props) => {
+  const { transliteration, setTransliteration } = useSettings(
+    (state) => ({
+      transliteration: state.transliteration,
+      setTransliteration: state.setTransliteration,
+    }),
+    shallow
+  );
+
+  return (
+    <AdjustmentWrapper title="Transliterasi / Latin">
+      <label
+        htmlFor="default-toggle"
+        className="inline-flex relative items-center cursor-pointer"
+      >
+        <input
+          defaultChecked={transliteration}
+          type="checkbox"
+          value=""
+          id="default-toggle"
+          className="sr-only peer"
+        />
+        <div
+          onClick={() => setTransliteration(!transliteration)}
+          className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 dark:peer-focus:ring-slate-500/50 rounded-full peer dark:bg-slate-500 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-emerald-500 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-white dark:peer-checked:bg-emerald-100"
+        ></div>
+      </label>
+    </AdjustmentWrapper>
+  );
+};
+
+export default Transliteration;

src/components/quranReader/Arabic/Word.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import { shallow } from 'zustand/shallow';
 import styles from './Word.module.css';
 import useQuranReader from '@stores/quranReaderStore';
+import useSettings from '@stores/settingsStore';
 
 const cx = classNames.bind(styles);
 
@@ -34,21 +35,35 @@ const Word = ({
     shallow
   );
 
+  const { transliteration: shouldShowTransliteration } = useSettings(
+    (state) => ({
+      transliteration: state.transliteration,
+    })
+  );
+
   return (
-    <span
+    <div
       className={cx(
+        'text-center inline',
         {
           '!text-emerald-500 !dark:text-emerald-500':
             highlightedWord === location || isHighlighted,
         },
         {
           highlighted: highlightedWord === location || isHighlighted,
+        },
+        {
+          'mx-2': shouldShowTransliteration,
         }
       )}
-      data-word={location}
     >
-      {children}{' '}
-    </span>
+      <span data-word={location}>{children} </span>
+      {shouldShowTransliteration && (
+        <span className="text-sm lg:text-base italic block">
+          {transliteration}
+        </span>
+      )}
+    </div>
   );
 };
 

src/components/quranReader/ArabicText.tsx

@@ -67,13 +67,14 @@ const ArabicText = ({
         }
       )}
     >
-      <span
+      <div
         style={{ fontSize: currentFontSize }}
         className={arabicFontStyle(
           { alQalam: fontFace === 0 },
           { meQuran: fontFace === 1 },
           { nastaleeq: fontFace === 2 },
-          { uthmanic: fontFace === 3 }
+          { uthmanic: fontFace === 3 },
+          'flex flex-wrap'
         )}
       >
         {words
@@ -86,12 +87,13 @@ const ArabicText = ({
                   word.position === words.length.toString() &&
                   verseKey === highlightedVerse
                 }
+                transliteration={word.transliteration.text}
               >
                 {word.text}
               </Word>
             ))
           : textUthmani}
-      </span>
+      </div>
       {!(fontFace === 3) && (
         <div
           className={classNames(

src/store/settingsStore.ts

@@ -10,12 +10,14 @@ interface SettingsStore {
   fontFace: number;
   theme: Theme;
   autoScroll: AutoScroll;
+  transliteration: boolean;
 
   setTheme: (theme: Theme) => void;
   setFontFace: (fontFace: number) => void;
   increaseFontSize: () => void;
   decreaseFontSize: () => void;
   setAutoScroll: (value: AutoScroll) => void;
+  setTransliteration: (value: boolean) => void;
 }
 
 const useSettings = create<SettingsStore>()(
@@ -25,6 +27,7 @@ const useSettings = create<SettingsStore>()(
       fontFace: 3,
       theme: 'default',
       autoScroll: 'word',
+      transliteration: false,
 
       setTheme: (theme) => {
         set({ theme: theme });
@@ -41,6 +44,7 @@ const useSettings = create<SettingsStore>()(
         }
       },
       setAutoScroll: (value) => set({ autoScroll: value }),
+      setTransliteration: (value) => set({ transliteration: value }),
     }),
     {
       name: 'settings', // name of the item in the storage (must be unique)