ิbox

WebmasterCamp · Jul 21, 2024 · c674071 · c674071
1 parent 087dddc
commit c674071
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 9 deletions.
diff --git a/app/components/box1.js b/app/components/box1.js
@@ -4,8 +4,12 @@ import { useEffect, useState } from "react";
 export default function Box1({ salary }) {
   const [funds, setFunds] = useState(false)
   const [insurance, setInsurance] = useState(false)
-  const [oldMomDad, setOldMomDad] = useState(false)
+  const [government, setGovernment] = useState(false)
   const [charity, setCharity] = useState(false)
+  const [health, setHealth] = useState(false)
+  const [home, setHome] = useState(false)
+  const [taxbase, setTaxbase] = useState(false)
+  const [long, setLong] = useState(false)
   const [reduction, setReduction] = useState(0)
 
   useEffect(() => {
@@ -16,22 +20,44 @@ export default function Box1({ salary }) {
     if (insurance) {
       newreduction += 5000
     }
-    if (oldMomDad) {
+    if (government) {
       newreduction += 2000
     }
     if (charity) {
       newreduction += 2000
     }
+    if (health) {
+      newreduction += 2000
+    }
+    if (home) {
+      newreduction += 2000
+    }
+    if (taxbase) {
+      newreduction += 2000
+    }
+    if (long) {
+      newreduction += 2000
+    }
     setReduction(newreduction)
-  }, [funds, insurance, oldMomDad, charity])
+  }, [funds, insurance, government, charity])
 
   return (
-    <div>
+    <div className="flex flex-col justify-center items-center gap-20">
       <p className="font-bold">Salary : {salary}</p>
-      <div><input type="checkbox" Checked={funds} onChange={() => { setFunds(!funds) }} /> Funds</div>
-      <div><input type="checkbox" Checked={insurance} onChange={() => { setInsurance(!insurance) }} /> Insurance</div>
-      <div><input type="checkbox" Checked={oldMomDad} onChange={() => { setOldMomDad(!oldMomDad) }} /> OldMomDad</div>
-      <div><input type="checkbox" Checked={charity} onChange={() => { setCharity(!charity) }} /> Charity</div>
+      <div className="flex gap-9">
+      <div>
+        <div><input type="checkbox" Checked={funds} onChange={() => { setFunds(!funds) }} /> การลงทุน RMF</div>
+        <div><input type="checkbox" Checked={insurance} onChange={() => { setHealth(!health) }} /> ประกันสุขภาพ</div>
+        <div><input type="checkbox" Checked={government} onChange={() => { setInsurance(!insurance) }} /> ประกันชีวิต</div>
+        <div><input type="checkbox" Checked={charity} onChange={() => { setCharity(!charity) }} /> บริจาค</div>
+      </div>
+      <div>
+        <div><input type="checkbox" Checked={home} onChange={() => { setHome(!home) }} /> ดอกเบี้ยบ้าน</div>
+        <div><input type="checkbox" Checked={taxbase} onChange={() => { setTaxbase(!taxbase) }} /> ฐานภาษี</div>
+        <div><input type="checkbox" Checked={long} onChange={() => { setLong(!long) }} /> กองทุนรวมหุ้นระยะยาว</div>
+        <div><input type="checkbox" Checked={government} onChange={() => { setGovernment(!government) }} /> ใช้สิทธิตามมาตรการกระตึ้นเศรษฐกิจของรัฐ</div>
+      </div>
+      </div>
       <p className="font-bold">reduction : {reduction}</p>
     </div>
   );

diff --git a/app/components/box2.js b/app/components/box2.js
@@ -21,7 +21,6 @@ export default function Box2({ salary }) {
         </div>
         <div className="flex gap-16 ">
           <Box1 salary={salary} />
-          <Box1 salary={salary} />
         </div>
       </Box>
     </div>