#44 add chapter text in chapter filter menu

kaogeek · Mar 11, 2024 · 32f5880 · 32f5880
1 parent 5cb70e1
commit 32f5880
Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/components/SelectChapters/ChapterButton.jsx b/src/components/SelectChapters/ChapterButton.jsx
@@ -2,7 +2,7 @@ import { Icon } from "@iconify/react";
 
 import chapterColorCode from "../../constants/chapterColorCode";
 
-function ChapterButton({ chapter, selected, onClick }) {
+function ChapterButton({ chapter, wording, selected, onClick }) {
   const activeStyle = "rounded-full text-black px-2";
   const inactiveStyle = "text-[#9f9f9f] px-4";
 
@@ -33,7 +33,7 @@ function ChapterButton({ chapter, selected, onClick }) {
           </div>
         )}
         <div className="text-ellipsis whitespace-nowrap overflow-hidden">
-          {chapter}
+          {wording}
         </div>
       </div>
     </button>

diff --git a/src/components/SelectChapters/SelectChapters.jsx b/src/components/SelectChapters/SelectChapters.jsx
@@ -1,5 +1,5 @@
 import ChapterButton from "./ChapterButton";
-import chapters from "../../constants/chapters";
+import chapters, { chapterNameToId } from "../../constants/chapters";
 
 function SelectChapters(props) {
   const { selectedChapters, onChange } = props;
@@ -9,6 +9,7 @@ function SelectChapters(props) {
       <ChapterButton
         key={"ทั้งหมด"}
         chapter={"ทั้งหมด"}
+        wording={"ทั้งหมด"}
         selected={selectedChapters.length === 0}
         onClick={() => {
           onChange([]);
@@ -18,6 +19,11 @@ function SelectChapters(props) {
         <ChapterButton
           key={chapter}
           chapter={chapter}
+          wording={
+            chapterNameToId[chapter].match(/^[0-9]+$/)
+              ? 'หมวด ' + chapterNameToId[chapter] + ' ' + chapter
+              : chapter
+          }
           selected={selectedChapters.includes(chapter)}
           onClick={() => {
             if (selectedChapters.includes(chapter)) {