Add multistage

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.13",
     "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
+    "@react-pdf/renderer": "^3.1.12",
     "@tailwindcss/forms": "^0.5.3",
     "eslint-config-next": "13.2.3",
     "flowbite": "^1.6.5",
@@ -25,6 +26,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.14",
+    "daisyui": "^3.1.0",
     "eslint": "^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-node": "^4.1.0",

src/app/create/page.js

@@ -0,0 +1,12 @@
+import React from "react"
+import EventForm from "$/create/EventForm"
+
+export default function create() {
+  return (
+    <>
+      <div className="flex justify-center">
+        <EventForm />
+      </div>
+    </>
+  )
+}

src/components/create/ButtonPartyForm.jsx

@@ -3,7 +3,7 @@
 import React, { useState } from "react"
 import { useRouter } from "next/navigation"
 
-import PartyForm from "./PartyForm"
+import EventForm from "./EventForm"
 
 export default function ButtonPartyForm() {
   const [showDialog, setShowDialog] = useState(false)
@@ -40,7 +40,7 @@ export default function ButtonPartyForm() {
         <div>
           <div className="fixed top-0 left-0 z-50 h-full w-full bg-gray-500 opacity-50"></div>
           <div className="fixed top-1/2 left-1/2 z-50 h-auto -translate-x-1/2 -translate-y-1/2 transform">
-            <PartyForm onClick={handlePartyClick} />
+            <EventForm onClick={handlePartyClick} />
           </div>
           {screen.width > 400 && tryButton()}
         </div>

src/components/create/PartyForm.jsx → src/components/create/EventForm.jsx

@@ -3,8 +3,9 @@
 import { useState } from "react"
 import Image from "next/image"
 import { useForm } from "react-hook-form"
+import Form from "./multiStep/Form"
 
-const PartyForm = ({ onClick }) => {
+const EventForm = ({ onClick }) => {
   const [useCurrentLocation, setUseCurrentLocation] = useState(false)
 
   const {
@@ -20,7 +21,9 @@ const PartyForm = ({ onClick }) => {
   }
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <>
+    <Form />
+    {/* <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex h-auto w-80 bg-gray-100 md:min-w-max">
         <div
           className="m-auto"
@@ -154,8 +157,9 @@ const PartyForm = ({ onClick }) => {
           </div>
         </div>
       </div>
-    </form>
+    </form> */}
+    </>
   )
 }
 
-export default PartyForm
+export default EventForm

src/components/create/multiStep/AddonComponent.jsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from "react";
+
+const AddonComponent = ({
+  id,
+  title,
+  desc,
+  price,
+  selected,
+  onBoxCheck,
+  planDuration,
+}) => {
+  const [addonBg, setAddonBg] = useState("");
+  const [check, setCheck] = useState(false);
+  useEffect(() => {
+    if (selected) {
+      setAddonBg("bg-[#f0f6ff]");
+      setCheck(true);
+    } else {
+      setAddonBg("");
+      setCheck(false);
+    }
+    // console.log("check", check);
+    // console.log("selected", selected);
+  }, [selected, check]);
+
+  // const toggleCheckbox = () => {
+  //   if (selected) {
+  //     setAddonBg("bg-[#d6d9e6]");
+  //     setCheck(true);
+  //   } else {
+  //     setAddonBg("");
+  //     setCheck(false);
+  //   }
+  // };
+
+  return (
+    <div
+      // onClick={() => {
+      //   onAddonSelect(id);
+      //   toggleCheckbox();
+      // }}
+      className={`${addonBg} flex justify-between items-center border border-[#d6d9e6] space-x-5 md:space-x-40 py-3 pr-8 pl-6 rounded-xl hover:border-[#02295a]`}
+    >
+      <div className="flex items-center justify-between w-full space-x-6">
+        <div className="flex items-center space-x-5 w-full">
+          <input
+            onChange={onBoxCheck}
+            data-id={id}
+            data-title-name={title}
+            data-price={price}
+            className="w-4 h-4"
+            type="checkbox"
+            checked={check}
+          />
+          <div className="">
+            <div className="font-bold text-[#02295a]">{title}</div>
+            <div className="text-[#9699ab] text-[14px]">{desc}</div>
+          </div>
+        </div>
+        <div className="text-[#adbeff] text-[14px] font-bold">
+          +${price}/{planDuration}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddonComponent;

src/components/create/multiStep/Addons.jsx

@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from "react";
+import AddonComponent from "./AddonComponent";
+import SectionHeading from "./SectionHeading";
+
+const Addons = ({ currentStep, onBoxCheck, planDuration, addonOptions }) => {
+  const [bg, setBg] = useState("black");
+
+  useEffect(() => {}, []);
+
+  return (
+    <div>
+      <SectionHeading
+        title="Pick add-ons"
+        desc="Add-ons help enhance your gaming experience."
+      />
+      <div className="space-y-5">
+        {addonOptions.map((addon) => (
+          <AddonComponent
+            onBoxCheck={onBoxCheck}
+            key={addon.id}
+            id={addon.id}
+            title={addon.title}
+            desc={addon.desc}
+            price={addon.price}
+            selected={addon.selected}
+            planDuration={planDuration}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Addons;