Basic Form

src/App.tsx

@@ -1,15 +1,12 @@
-
 import "./App.css";
 import Header from "./components/Header";
 import { UserProvider } from "./firebase/UserProvider";
 import Pages from "./Pages";
 
 function App() {
-
-
   return (
     <UserProvider>
-      <div className="w-[25rem] h-[30rem] flex flex-col gap-2 border border-red-500">
+      <div className="w-[25rem] h-[37.5rem] flex flex-col gap-2">
         <Header />
         <Pages />
       </div>

src/components/Form1.tsx

@@ -1,75 +1,93 @@
-import { useState } from "react";
 import Input from "./ui/Input";
 import Label from "./ui/Label";
 import SelectBox from "./ui/SelectBox";
+import { FormData } from "../types";
+import Button from "./ui/Button";
 
 interface Form1Props {
   setStep: (step: number) => void;
+  formData: FormData;
 }
 
-export default function Form1({ setStep }: Form1Props) {
-  const [age, setAge] = useState<string | number | readonly string[] | undefined>();
-  const [gender, setGender] = useState<string | number | readonly string[] | undefined>();
-  const [debtComfortLevel, setDebtComfortLevel] = useState<string | number | readonly string[] | undefined>("2");
-  const [annualIncome, setAnnualIncome] = useState<string | number | readonly string[] | undefined>();
-  const [avgMonthlySavings, setAvgMonthlySavings] = useState<string | number | readonly string[] | undefined>();
-
+export default function Form1({ setStep, formData }: Form1Props) {
   return (
     <form
-      className="flex flex-col gap-4"
+      className="flex flex-col gap-6"
       onSubmit={(e) => {
         e.preventDefault();
         setStep(2);
-        console.log(
-          `age: ${age}, gender: ${gender}, debt comfort level: ${debtComfortLevel}, annual income: ${annualIncome}, avg monthly savings: ${avgMonthlySavings}`
-        );
       }}
     >
       <div className="flex flex-col gap-2">
         <Label>YOUR AGE</Label>
         <Input
           type="number"
-          value={age}
-          onChange={(e) => setAge(e.target.value)}
+          value={formData.age}
+          onChange={(e) => formData.setAge(e.target.value)}
+          required
         />
       </div>
       <div className="flex flex-col gap-2">
         <Label>YOUR GENDER IDENTITY</Label>
         <div className="flex justify-center gap-2">
-          <SelectBox onClick={() => setGender("male")}>Male</SelectBox>
-          <SelectBox onClick={() => setGender("void")}>
+          <SelectBox
+            value="male"
+            selected={formData.gender}
+            setSelected={formData.setGender}
+          >
+            Male
+          </SelectBox>
+          <SelectBox
+            value="void"
+            selected={formData.gender}
+            setSelected={formData.setGender}
+          >
             Prefer not to say
           </SelectBox>
-          <SelectBox onClick={() => setGender("female")}>Female</SelectBox>
+          <SelectBox
+            value="female"
+            selected={formData.gender}
+            setSelected={formData.setGender}
+          >
+            Female
+          </SelectBox>
         </div>
       </div>
       <div className="flex flex-col gap-2">
         <Label>DEBT COMFORT LEVEL</Label>
-        <input
-          type="range"
-          min="1"
-          max="10"
-          value={debtComfortLevel}
-          onChange={(e) => setDebtComfortLevel(e.target.value)}
-        />
+        <div className="flex justify-between items-center gap-2">
+          <p className="text-sm font-medium">0</p>
+          <input
+            type="range"
+            min="1"
+            max="10"
+            value={formData.debtComfortLevel}
+            onChange={(e) => formData.setDebtComfortLevel(e.target.value)}
+            className="w-70"
+            required
+          />
+          <p className="text-sm font-medium">10</p>
+        </div>
       </div>
       <div className="flex flex-col gap-2">
         <Label>ANNUAL INCOME</Label>
         <Input
           type="number"
-          value={annualIncome}
-          onChange={(e) => setAnnualIncome(e.target.value)}
+          value={formData.annualIncome}
+          onChange={(e) => formData.setAnnualIncome(e.target.value)}
+          required
         />
       </div>
       <div className="flex flex-col gap-2">
         <Label>AVERAGE MONTHLY SAVINGS</Label>
         <Input
           type="number"
-          value={avgMonthlySavings}
-          onChange={(e) => setAvgMonthlySavings(e.target.value)}
+          value={formData.avgMonthlySavings}
+          onChange={(e) => formData.setAvgMonthlySavings(e.target.value)}
+          required
         />
       </div>
-      <button type="submit">Continue to habits</button>
+      <Button type="submit">Continue to habits</Button>
     </form>
   );
 }

src/components/Form2.tsx

@@ -1,22 +1,75 @@
+import Button from "./ui/Button";
 import Input from "./ui/Input";
 import Label from "./ui/Label";
+import { FormData } from "../types";
+interface Form2Props {
+  formData: FormData;
+  handleFormSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+}
 
-export default function Form2() {
+export default function Form2({ formData, handleFormSubmit }: Form2Props) {
   return (
-    <form className="flex flex-col gap-4">
+    <form className="flex flex-col gap-6" onSubmit={(e) => handleFormSubmit(e)}>
       <div className="flex flex-col gap-2">
         <Label>HOW FREQUENTLY DO YOU MAKE ONLINE PURCHASES</Label>
-        <input type="range" min="1" max="10" />
-      </div>
-      <div className="flex flex-col gap-2">
-        <Label>RANK THE CATEGORIES</Label>
-        <Input />
+        <div className="flex justify-between items-center gap-2">
+          <p className="text-xs font-medium uppercase text-center">Barely</p>
+          <input
+            type="range"
+            min="1"
+            max="10"
+            value={formData.purchaseFrequency}
+            onChange={(e) => formData.setPurchaseFrequency(e.target.value)}
+            className="w-70"
+            required
+          />
+          <p className="text-xs font-medium uppercase text-center">Every day</p>
+        </div>
       </div>
       <div className="flex flex-col gap-2">
-        <Label>AVERAGE MONTHLY SAVINGS</Label>
-        <Input />
+        <Label>ENTER MONTHLY SPENDING GOAL FOR EACH CATEGORY</Label>
+        <div className="flex items-center gap-2">
+          <Label>🍔 Food:</Label>
+          <Input
+            type="number"
+            value={formData.foodSpend}
+            onChange={(e) => formData.setFoodSpend(e.target.value)}
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Label>👖 Clothing:</Label>
+          <Input
+            type="number"
+            value={formData.clothingSpend}
+            onChange={(e) => formData.setClothingSpend(e.target.value)}
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Label>📱 Electronics:</Label>
+          <Input
+            type="number"
+            value={formData.electronicsSpend}
+            onChange={(e) => formData.setElectronicsSpend(e.target.value)}
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Label>💳 Subscriptions:</Label>
+          <Input
+            type="number"
+            value={formData.subscriptionsSpend}
+            onChange={(e) => formData.setSubscriptionsSpend(e.target.value)}
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Label>🤑 Other:</Label>
+          <Input
+            type="number"
+            value={formData.otherSpend}
+            onChange={(e) => formData.setOtherSpend(e.target.value)}
+          />
+        </div>
       </div>
-      <button>Continue to habits</button>
+      <Button type="submit">Start saving! :P</Button>
     </form>
   );
 }

src/components/FormPage.tsx

@@ -1,21 +1,84 @@
 import { useState } from "react";
 import Form1 from "./Form1";
 import Form2 from "./Form2";
-import Form3 from "./Form3";
+import { InputValue } from "../types";
 
-export default function FormPage() {
+interface FormPageProps {
+  setPage: (page: string) => void;
+}
+
+export default function FormPage({ setPage }: FormPageProps) {
   const [step, setStep] = useState<number>(1);
 
+  const [age, setAge] = useState<InputValue>();
+  const [gender, setGender] = useState<InputValue>();
+  const [debtComfortLevel, setDebtComfortLevel] = useState<InputValue>(5);
+  const [annualIncome, setAnnualIncome] = useState<InputValue>();
+  const [avgMonthlySavings, setAvgMonthlySavings] = useState<InputValue>();
+
+  const [purchaseFrequency, setPurchaseFrequency] = useState<InputValue>();
+  const [foodSpend, setFoodSpend] = useState<InputValue>();
+  const [clothingSpend, setClothingSpend] = useState<InputValue>();
+  const [electronicsSpend, setElectronicsSpend] = useState<InputValue>();
+  const [subscriptionsSpend, setSubscriptionsSpend] = useState<InputValue>();
+  const [otherSpend, setOtherSpend] = useState<InputValue>();
+
+  const formData = {
+    age,
+    setAge,
+    gender,
+    setGender,
+    debtComfortLevel,
+    setDebtComfortLevel,
+    annualIncome,
+    setAnnualIncome,
+    avgMonthlySavings,
+    setAvgMonthlySavings,
+    purchaseFrequency,
+    setPurchaseFrequency,
+    foodSpend,
+    setFoodSpend,
+    clothingSpend,
+    setClothingSpend,
+    electronicsSpend,
+    setElectronicsSpend,
+    subscriptionsSpend,
+    setSubscriptionsSpend,
+    otherSpend,
+    setOtherSpend,
+  };
+
+  const submitData = {
+    age,
+    gender,
+    debtComfortLevel,
+    annualIncome,
+    avgMonthlySavings,
+    purchaseFrequency,
+    foodSpend,
+    clothingSpend,
+    electronicsSpend,
+    subscriptionsSpend,
+    otherSpend,
+  };
+
+  function handleFormSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    console.log(submitData);
+    setPage("dashboard");
+  }
+
   return (
     <div>
       <div className="flex flex-col justify-center items-center gap-2 text-center mb-8">
         <h1>Welcome NAME</h1>
         <p>Help us understand your financial habits.</p>
       </div>
 
-      {step == 1 && <Form1 setStep={setStep} />}
-      {step == 2 && <Form2 />}
-      {step == 3 && <Form3 />}
+      {step == 1 && <Form1 setStep={setStep} formData={formData} />}
+      {step == 2 && (
+        <Form2 formData={formData} handleFormSubmit={handleFormSubmit} />
+      )}
     </div>
   );
 }

src/components/ui/Button.tsx

@@ -2,20 +2,25 @@ import React from "react";
 
 type ButtonProps = {
   children: React.ReactNode;
-  onClick: () => void;
+  onClick?: () => void;
   disabled?: boolean;
+  className?: string;
+  type?: "submit" | "reset" | "button" | undefined;
 };
 
 export default function Button({
   children,
   onClick,
   disabled = false,
+  className,
+  type,
 }: ButtonProps) {
   return (
     <button
+      type={type}
       onClick={onClick}
       disabled={disabled}
-      className="px-4 py-2 bg-blue-500 text-white rounded-md disabled:bg-gray-400"
+      className={`px-4 py-2 bg-[#f75a11] hover:bg-[#f75a11ec] cursor-pointer text-white rounded-md disabled:bg-gray-400 font-semibold uppercase text-xs ${className}`}
     >
       {children}
     </button>