feat: translation per word

src/components/TopBar/DeveloperUtility/DeveloperUtility.tsx

@@ -8,6 +8,7 @@ import AutoScroll from './AutoScroll';
 import { FontAdjustment, FontSizeAdjustment } from './FontAdjustment';
 import ThemeAdjustment from './ThemeAdjustment';
 import Transliteration from './Transliteration';
+import TranslationOption from './TranslationOption';
 
 type DeveloperUtilityProps = {
   isInSurah?: boolean;
@@ -43,10 +44,11 @@ const DeveloperUtility = ({ isInSurah }: DeveloperUtilityProps) => {
         {/* <LanguageAdjustment /> */}
         {isInSurah && (
           <>
+            <TranslationOption />
+            <Transliteration />
             <FontAdjustment />
             <FontSizeAdjustment />
             <AutoScroll />
-            <Transliteration />
           </>
         )}
       </div>

src/components/TopBar/DeveloperUtility/TranslationOption.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import AdjustmentWrapper from './AdjustmentWrapper';
+import { OptionButton } from './OptionList';
+import useSettings from '@stores/settingsStore';
+
+type Props = {};
+
+const TranslationOption = (props: Props) => {
+  const { translationMode, setTranslationMode } = useSettings((state) => ({
+    translationMode: state.translationMode,
+    setTranslationMode: state.setTranslationMode,
+  }));
+
+  return (
+    <AdjustmentWrapper title="Jenis Terjemahan">
+      <div className="bg-gray-100 dark:bg-slate-500 dark:text-slate-200 p-1 rounded text-black">
+        <div className="flex items-center relative">
+          <OptionButton
+            onClick={() => setTranslationMode('word')}
+            label="scroll otomatis per kata"
+            active={translationMode === 'word'}
+          >
+            Kata
+          </OptionButton>
+          <OptionButton
+            onClick={() => setTranslationMode('verse')}
+            label="scroll otomatis per ayah"
+            active={translationMode === 'verse'}
+          >
+            Ayah
+          </OptionButton>
+        </div>
+      </div>
+    </AdjustmentWrapper>
+  );
+};
+
+export default TranslationOption;

src/components/quranReader/Arabic/Word.tsx

@@ -10,13 +10,14 @@ import useSettings from '@stores/settingsStore';
 const cx = classNames.bind(styles);
 
 type WordProps = {
-  position?: string;
+  position?: number;
   verseKey?: string;
-  transalation?: string;
-  transliteration?: string;
+  transalation: string;
+  transliteration: string;
   location: string;
   children: React.ReactNode;
   isHighlighted: boolean;
+  isAyahNumber: boolean;
 };
 
 const Word = ({
@@ -27,6 +28,7 @@ const Word = ({
   location,
   children,
   isHighlighted,
+  isAyahNumber,
 }: WordProps) => {
   const { highlightedWord } = useQuranReader(
     (state) => ({
@@ -35,32 +37,47 @@ const Word = ({
     shallow
   );
 
-  const { transliteration: shouldShowTransliteration } = useSettings(
-    (state) => ({
-      transliteration: state.transliteration,
-    })
-  );
+  const { transliteration: shouldShowTransliteration, translationMode } =
+    useSettings(
+      (state) => ({
+        transliteration: state.transliteration,
+        translationMode: state.translationMode,
+      }),
+      shallow
+    );
 
   return (
-    <div
-      className={cx(
-        'text-center inline',
-        {
-          '!text-emerald-500 !dark:text-emerald-500':
-            highlightedWord === location || isHighlighted,
-        },
-        {
-          highlighted: highlightedWord === location || isHighlighted,
-        },
-        {
-          'mx-2': shouldShowTransliteration,
-        }
-      )}
-    >
-      <span data-word={location}>{children} </span>
-      {shouldShowTransliteration && (
-        <span className="text-sm lg:text-base italic block">
-          {transliteration}
+    <div className="inline-block align-middle text-center">
+      <div
+        className={cx(
+          {
+            '!text-emerald-500 !dark:text-emerald-500':
+              highlightedWord === location || isHighlighted,
+          },
+          {
+            highlighted: highlightedWord === location || isHighlighted,
+          },
+          {
+            'mx-1 lg:mx:2': shouldShowTransliteration,
+          },
+          {
+            'p-2 border border-slate-400 dark:border-slate-500 rounded-lg mx-1 lg:mx-2':
+              translationMode === 'word' && !isAyahNumber,
+          },
+          'ml-2'
+        )}
+      >
+        <span data-word={location}>{children}</span>
+        {shouldShowTransliteration && (
+          <span className="text-sm lg:text-base italic block ">
+            {transliteration}
+          </span>
+        )}
+      </div>
+      {/* dont show Ayah number */}
+      {translationMode === 'word' && !isAyahNumber && (
+        <span className="text-base md:text-xl mx-2 mt-1 mb-3 block">
+          {transalation}
         </span>
       )}
     </div>

src/components/quranReader/ArabicText.tsx

@@ -56,7 +56,7 @@ const ArabicText = ({
       className={classNames(
         'text-right dark:text-slate-100 transition-all inline',
         {
-          'lg:leading-[120px] leading-[80px]': leading === 'medium',
+          'lg:leading-[100px] leading-[80px]': leading === 'medium',
         },
         {
           'leading-[70px]': leading === 'normal',
@@ -73,21 +73,22 @@ const ArabicText = ({
           { alQalam: fontFace === 0 },
           { meQuran: fontFace === 1 },
           { nastaleeq: fontFace === 2 },
-          { uthmanic: fontFace === 3 },
-          'flex flex-wrap'
+          { uthmanic: fontFace === 3 }
         )}
       >
         {words
           ? words.map((word) => (
               <Word
+                isAyahNumber={word.position === words.length}
                 position={word.position}
                 location={word.location}
                 key={word.id}
                 isHighlighted={
-                  word.position === words.length.toString() &&
+                  word.position === words.length &&
                   verseKey === highlightedVerse
                 }
                 transliteration={word.transliteration.text}
+                transalation={word.translation.text}
               >
                 {word.text}
               </Word>

src/components/quranReader/Verses.tsx

@@ -1,9 +1,13 @@
+'use client';
+
 import ArabicText from './ArabicText';
 import { StarIcon } from '../icons';
 import HandleBookmark from './action/HandleBookmark';
 import CopyToClipboard from './action/CopyToClipboard';
 import HandleTafsir from './action/HandleTafsir';
 import { VerseWord } from '@utils/types/Verse';
+import useSettings from '@stores/settingsStore';
+import { shallow } from 'zustand/shallow';
 
 type VersesProps = {
   id: number;
@@ -22,6 +26,13 @@ const Verses = ({
   verse_key,
   words,
 }: VersesProps) => {
+  const { translationMode } = useSettings(
+    (state) => ({
+      translationMode: state.translationMode,
+    }),
+    shallow
+  );
+
   if (true) {
     return (
       <>
@@ -51,10 +62,12 @@ const Verses = ({
               verseNumber={verse_number}
               verseKey={verse_key}
             />
-            <span
-              dangerouslySetInnerHTML={{ __html: translations[0].text }}
-              className="text-base md:text-xl mt-5 inline-block"
-            ></span>
+            {translationMode === 'verse' && (
+              <span
+                dangerouslySetInnerHTML={{ __html: translations[0].text }}
+                className="text-base md:text-xl mt-5 inline-block"
+              ></span>
+            )}
           </div>
         </div>
         <hr className="border-none my-3 lg:my-5 h-[1px] bg-emerald-500" />

src/store/settingsStore.ts

@@ -4,20 +4,23 @@ import setTheme from '../utils/theme';
 
 export type Theme = 'default' | 'light' | 'dark';
 export type AutoScroll = 'verse' | 'word' | false;
+export type translationMode = 'word' | 'verse';
 
 interface SettingsStore {
   fontSize: number;
   fontFace: number;
   theme: Theme;
   autoScroll: AutoScroll;
   transliteration: boolean;
+  translationMode: translationMode;
 
   setTheme: (theme: Theme) => void;
   setFontFace: (fontFace: number) => void;
   increaseFontSize: () => void;
   decreaseFontSize: () => void;
   setAutoScroll: (value: AutoScroll) => void;
   setTransliteration: (value: boolean) => void;
+  setTranslationMode: (value: translationMode) => void;
 }
 
 const useSettings = create<SettingsStore>()(
@@ -28,6 +31,7 @@ const useSettings = create<SettingsStore>()(
       theme: 'default',
       autoScroll: 'word',
       transliteration: false,
+      translationMode: 'verse',
 
       setTheme: (theme) => {
         set({ theme: theme });
@@ -45,6 +49,7 @@ const useSettings = create<SettingsStore>()(
       },
       setAutoScroll: (value) => set({ autoScroll: value }),
       setTransliteration: (value) => set({ transliteration: value }),
+      setTranslationMode: (value) => set({ translationMode: value }),
     }),
     {
       name: 'settings', // name of the item in the storage (must be unique)

src/utils/types/Verse.ts

@@ -2,7 +2,7 @@ export type VerseWord = {
   id: string;
   text: string;
   location: string;
-  position: string;
+  position: number;
   translation: {
     text: string;
   };