From 857eb5910cb194df9de9c2988b2c6b19174d7d19 Mon Sep 17 00:00:00 2001
From: Jame <>
Date: Thu, 14 Dec 2023 15:43:52 +0700
Subject: [PATCH] fix bugs

---
 app/page.tsx                   | 2 +-
 components/ChartGroup.tsx      | 8 ++++++--
 components/SectionIntro.tsx    | 4 ++--
 components/SectionLanding.tsx  | 8 ++++----
 components/SectionPart1.tsx    | 2 +-
 components/SectionWhat.tsx     | 4 +++-
 components/SituationDetail.tsx | 2 +-
 hooks/useChart.tsx             | 8 +++++++-
 public/data/data-sheet.json    | 2 +-
 9 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index f945755..c5fa347 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -26,7 +26,7 @@ export default function IndexPage() {
         <SectionPart1 />
         <SectionPart2 />
         <SectionPart3 />
-        <div className="pointer-events-auto bg-black">
+        <div id="chart24" className="pointer-events-auto bg-black">
           <SectionPartEnd />
         </div>
       </div>
diff --git a/components/ChartGroup.tsx b/components/ChartGroup.tsx
index 0b3d7d4..123a925 100644
--- a/components/ChartGroup.tsx
+++ b/components/ChartGroup.tsx
@@ -29,6 +29,7 @@ export default function ChartGroup() {
     interactable,
     suggests,
     mode,
+    showChart,
     getBarDataByYear,
     getStackDataByYear,
   } = useChart();
@@ -134,7 +135,7 @@ export default function ChartGroup() {
             </div>
             {guideYears.includes(i) && (
               <div className="absolute inset-x-0 bottom-0 flex flex-col items-center justify-end">
-                <div className="wv-h11 inline-flex items-center gap-1 rounded-t-md bg-highlight p-1 font-bold text-black lg:px-3">
+                <div className="wv-h11 inline-flex max-w-[85%] items-center justify-center gap-1 rounded-t-md bg-highlight p-1 font-bold text-black md:px-3">
                   <CustomImg
                     src="/images/icon_star_2.webp"
                     className="w-3 lg:w-5"
@@ -289,7 +290,10 @@ export default function ChartGroup() {
     <>
       <div
         id="chart"
-        className="fixed inset-0 mx-auto flex max-w-[1108px] flex-col justify-center gap-3 lg:gap-4"
+        className={twMerge(
+          'fixed inset-0 mx-auto flex max-w-[1108px] flex-col justify-center gap-3 lg:gap-4',
+          !showChart && 'opacity-0',
+        )}
       >
         <div className="flex flex-col gap-1 p-4 pb-0 lg:gap-4">
           <div className="wv-h5 wv-kondolar font-black">
diff --git a/components/SectionIntro.tsx b/components/SectionIntro.tsx
index 1a57300..134d945 100644
--- a/components/SectionIntro.tsx
+++ b/components/SectionIntro.tsx
@@ -54,11 +54,11 @@ export default function SectionIntro() {
                 </div>
               </BorderBox>
               <div className="wv-h11 text-grey1">ข้ามไปสำรวจ</div>
-              <div className="rounded-sm border border-white lg:flex">
+              <div className="-mt-4 rounded-sm border border-white lg:flex">
                 {menuTabs.map((i) => (
                   <button
                     key={i.id}
-                    className="wv-h11 flex w-[200px] items-center gap-2 border-b border-white p-2 text-start last:border-0 hover:bg-white/20 lg:w-[290px] lg:border-b-0 lg:border-r"
+                    className="wv-h11 flex w-[200px] items-center gap-2 border-b border-white bg-black px-3 py-2 text-start last:border-0 hover:bg-white/20 lg:w-[300px] lg:border-b-0 lg:border-r"
                     onClick={() => goToSection('/', i.id)}
                   >
                     <IconWithBg
diff --git a/components/SectionLanding.tsx b/components/SectionLanding.tsx
index d3db5b8..dd17803 100644
--- a/components/SectionLanding.tsx
+++ b/components/SectionLanding.tsx
@@ -98,17 +98,17 @@ export default function SectionLanding() {
           “คำวินิจฉัยในเรื่องการตรวจสอบ สถาบันทางการเมือง”
         </span>{' '}
         เพราะเป็นการวินิจฉัยต่อบุคคล หรือสถาบันที่มาจากการเลือกตั้งโดยประชาชน
-        และหลาย คำวินิจฉัยก็ปรากฎให้เห็นถึงนัยซ่อนเร้นทางการเมืองที่ส่งผล
-        โดยตรงต่อภาพลักษณ์ความเป็นกลางของศาลรัฐธรรมนูญ
+        และหลายคำวินิจฉัยก็ปรากฎให้เห็นถึงนัยซ่อนเร้นทางการเมืองที่ส่งผลโดยตรงต่อภาพลักษณ์ความเป็น
+        กลางของศาลรัฐธรรมนูญ
       </SectionBox>
       <div className="screen"></div>
       <SectionBox id="chart4" boxCls="p-5 md:p-8 wv-h9">
         ในส่วนของ{' '}
         <span className="bg-freedom font-bold">
-          “คำวินิจฉัยในเรื่องการคุ้มครองสิทธิเสรีภาพ ของประชาชน
+          “คำวินิจฉัยในเรื่องการคุ้มครองสิทธิเสรีภาพของประชาชน
           และความมั่นคงของรัฐ”
         </span>{' '}
-        นั้น เป็นคำวินิจฉัย ที่กระทบสิทธิและเสรีภาพของประชาชนโดยตรง
+        นั้น เป็นคำวินิจฉัยที่กระทบสิทธิและเสรีภาพของประชาชนโดยตรง
         จึงเป็นประเภทคำวินิจฉัยที่ถือว่าใกล้ตัว และมีส่วนได้เสียกับ “เรา”
         ในฐานะประชาชนมากที่สุด
       </SectionBox>
diff --git a/components/SectionPart1.tsx b/components/SectionPart1.tsx
index 29230aa..3b7ab15 100644
--- a/components/SectionPart1.tsx
+++ b/components/SectionPart1.tsx
@@ -108,7 +108,7 @@ export default function SectionPart1() {
                 ตลอดช่วงการบังคับใช้รัฐธรรมนูญ 2540 ศาลรัฐธรรมนูญ
                 มีบทบาทอย่างแข็งขันในการวินิจฉัยชี้ขาดกรณีที่พรรคการเมืองใดทำผิด
                 พ.ร.ป. ว่าด้วยพรรคการเมืองฯ{' '}
-                <span className="bg-politics font-bold">
+                <span className="bg-politics font-bold leading-8">
                   มีผลทำให้พรรคการเมืองขนาดเล็ก จำนวน 76
                   พรรคถูกยุบพรรคลงเพราะไม่สามารถปฏิบัติตามเงื่อนไข
                   ให้ถูกต้องตามกฎหมายได้
diff --git a/components/SectionWhat.tsx b/components/SectionWhat.tsx
index 1d15183..8c23696 100644
--- a/components/SectionWhat.tsx
+++ b/components/SectionWhat.tsx
@@ -31,7 +31,9 @@ export default function SectionWhat() {
             className="mx-auto my-7 w-[330px]"
           />
           <div className="wv-h9">
-            ผลของคำวินิจฉัยจึงส่งผลกระทบต่อประชาชนทุกคน ทั้งทางตรงและทางอ้อม
+            ผลของคำวินิจฉัยจึงส่งผลกระทบต่อประชาชนทุกคน
+            <br />
+            ทั้งทางตรงและทางอ้อม
             <div className="font-bold">
               ทำให้ประชาชนเป็นผู้มีส่วนได้เสียจากคำวินิจฉัย
             </div>
diff --git a/components/SituationDetail.tsx b/components/SituationDetail.tsx
index 7feb644..f766c65 100644
--- a/components/SituationDetail.tsx
+++ b/components/SituationDetail.tsx
@@ -52,7 +52,7 @@ export default function SituationDetail({
             indicator={({ isOpen }) => (
               <CustomImg
                 src="/images/icon_arrow_up.webp"
-                className={twMerge('w-4', isOpen && '-rotate-90')}
+                className={twMerge('w-4 rotate-180', isOpen && 'rotate-90')}
               />
             )}
           >
diff --git a/hooks/useChart.tsx b/hooks/useChart.tsx
index 6084443..e190be4 100644
--- a/hooks/useChart.tsx
+++ b/hooks/useChart.tsx
@@ -860,6 +860,7 @@ export const useChart = () => {
   const [interactable, setInteractable] = useState(false);
   const [suggests, setChartSuggests] = useState<TChartSuggest[] | null>(null);
   const [mode, setMode] = useState<TChartMode>('stack');
+  const [showChart, setShowChart] = useState(true);
 
   const resetChart = (mode: TChartMode) => {
     setHighlightKeys([]);
@@ -876,7 +877,7 @@ export const useChart = () => {
 
   useEffect(() => {
     const handleScroll = throttle(() => {
-      for (let index = 1; index <= 23; index++) {
+      for (let index = 1; index <= 24; index++) {
         const elm = document.getElementById(`chart${index}`);
         if (isInView(elm)) {
           if (index === 1) {
@@ -985,6 +986,10 @@ export const useChart = () => {
             setChartSuggests(freedomSuggests);
             setGroup(groupData[6]);
             setInteractable(true);
+            setShowChart(true);
+          }
+          if (index === 24) {
+            setShowChart(false);
           }
         }
       }
@@ -1008,6 +1013,7 @@ export const useChart = () => {
     interactable,
     suggests,
     mode,
+    showChart,
     getBarDataByYear,
     getStackDataByYear,
   };
diff --git a/public/data/data-sheet.json b/public/data/data-sheet.json
index c48c7ce..d47c97e 100644
--- a/public/data/data-sheet.json
+++ b/public/data/data-sheet.json
@@ -1499,7 +1499,7 @@
     "เลขคำวินิจฉัย": "28/2543",
     "รัฐธรรมนูญ": 2540,
     "เรื่อง_ชื่อเต็ม": "คณะกรรมการป้องกันและปราบปรามการทุจริตแห่งชาติขอให้ศาลรัฐธรรมนูญวินิจฉัยชี้ขาดตามรัฐธรรมนูญ มาตรา 295 กรณีนายมะฮูเซ็น มะสุยี จงใจไม่ยื่นบัญชีแสดงรายการทรัพย์สินและหนี้สินและเอกสารประกอบ",
-    "เรื่อง_ชื่อย่อ": "คำินิจฉัยกรณีนายมะฮูเซ็น มะสุยี จงใจไม่ยื่นบัญชีแสดงรายการทรัพย์สินและหนี้สินและเอกสารประกอบ",
+    "เรื่อง_ชื่อย่อ": "คำวินิจฉัยกรณีนายมะฮูเซ็น มะสุยี จงใจไม่ยื่นบัญชีแสดงรายการทรัพย์สินและหนี้สินและเอกสารประกอบ",
     "วันที่": "06/07/2543",
     "ผู้ร้อง": "คณะกรรมการป้องกันและปราบปรามการทุจริตแห่งชาติ",
     "ผู้ถูกร้อง": "นายมะฮูเซ็น มะสุยี",