Merge pull request #3 from guzamak/main

update

app/calculator/page.js

@@ -0,0 +1,15 @@
+"use client"
+import Box2 from "../components/box2";
+
+export default function Home() {
+
+
+  return (
+    <main className="flex gap-5 relative font-Itim">
+      <div className="bg-[#DEF9C4] -z-20 absolute w-full h-full"></div>
+      <div className="min-h-screen  flex w-full justify-center mt-52">
+        <Box2/>
+      </div>
+    </main>
+  );
+}

app/components/box1.js

@@ -1,7 +1,8 @@
+
 'use client'
 import { useEffect, useState } from "react";
 
-export default function Box1({ salary }) {
+export default function Box1() {
   const [funds, setFunds] = useState(false)
   const [insurance, setInsurance] = useState(false)
   const [government, setGovernment] = useState(false)
@@ -12,6 +13,7 @@ export default function Box1({ salary }) {
   const [long, setLong] = useState(false)
   const [reduction, setReduction] = useState(0)
   const [tax,setTax] = useState(0)
+  const [salary,setSalary] = useState(250000)
 
   useEffect(() => {
     let newreduction = 0
@@ -68,29 +70,29 @@ export default function Box1({ salary }) {
     {
       setTax(115000 + ((salary-1000000) * 25/100))
     }
-    else if(salary <= 4000000)
+    else if(salary <= 5000000)
     {
       setTax(365000 + ((salary-2000000) * 30/100))
     }else {
-      setTax(965000 + ((salary-2000000) * 30/100))
+      setTax(965000 + ((salary-5000000) * 35/100))
     }
-  },[])
+  },[salary])
 
   return (
     <div className="flex flex-col justify-center items-center gap-20">
-      <p className="font-bold">รายได้สิทธิ : {salary}</p>
+      <p className="font-bold">รายได้สิทธิ : <input type="number" onChange={(e) => {setSalary(e.target.value)}} defaultValue={salary} className="bg-transparent outline-none"/></p>
       <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><input type="checkbox" checked={funds} onChange={() => { setFunds(!funds) }} /> การลงทุน RMF</div>
+        <div><input type="checkbox" checked={health} onChange={() => { setHealth(!health) }} /> ประกันสุขภาพ</div>
+        <div><input type="checkbox" checked={insurance} 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><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">ภาษี : {tax - reduction <= 0 ? 0: tax - reduction }</p>

app/components/box2.js

@@ -1,7 +1,8 @@
 import Image from "next/image";
 import Box from '@mui/material/Box';
 import Box1 from "./box1";
-export default function Box2({ salary }) {
+import { useEffect, useState } from "react";
+export default function Box2() {
 
 
   return (
@@ -20,9 +21,9 @@ export default function Box2({ salary }) {
             className="object-top -z-10"/>
         </div>
         <div className="flex gap-16 ">
-          <Box1 salary={salary} />
+          <Box1 />
         </div>
       </Box>
     </div>
   );
-}
+}

app/layout.js

@@ -4,8 +4,7 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Premieum Quest",
 };
 
 export default function RootLayout({ children }) {

app/page.js

@@ -3,12 +3,15 @@ import Image from "next/image";
 import AppBar from "./components/navbar";
 // import Carousel from "./components/carousel";
 import Footer from "./components/footer";
+import { useRouter } from "next/navigation";
 
 export default function Home() {
+  const router = useRouter()
+
   return (
-    <main className="">
+    <main className="flex flex-col justify-center itens-center">
       <AppBar />
-      {/* <Carousel /> */}
+      <img src={"/Desktop_-_1.png"} onClick={()=>{router.push('/calculator')}} className="w-full h-[1024]" />
       <Footer />
     </main>
   );