Advertisement
ikamal7

booknow.js

Jun 7th, 2023 (edited)
1,005
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {useState, useRef} from 'react';
  2. import Head from "next/head";
  3. import Stepper from "@/components/Booking/Stepper";
  4. import StepperControl from "@/components/Booking/StepperControl";
  5. import Services from "@/components/Booking/steps/Services";
  6. import Schedule from "@/components/Booking/steps/Schedule";
  7. import Contact from "@/components/Booking/steps/Contact";
  8. import Confirm from "@/components/Booking/steps/Confirm";
  9. import {StepperContext} from "@/contexts/StepperContext";
  10. import LocationNew from "@/components/Booking/steps/LocationNew";
  11. import Location from "@/components/Booking/steps/Location";
  12.  
  13. const BookNow = () => {
  14.     const [currentStep, setCurrentStep] = useState(1);
  15.     const steps = [
  16.         "Location",
  17.         "Services",
  18.         "Schedule",
  19.         "Contact",
  20.         "Confirm"
  21.     ];
  22.  
  23.     const displayStep = (step) => {
  24.         switch (step) {
  25.             case 1:
  26.                 return <LocationNew />;
  27.             case 2:
  28.                 return <Services />;
  29.             case 3:
  30.                 return <Schedule />;
  31.             case 4:
  32.                 return <Contact />;
  33.             case 5:
  34.                 return <Confirm />;
  35.             default:
  36.                 return <Location />;
  37.  
  38.         }
  39.     }
  40.     const handleClick = (direction) => {
  41.         let newStep = currentStep;
  42.         direction === "next" ? newStep++ : newStep--;
  43.         newStep > 0 && newStep <= steps.length && setCurrentStep(newStep);
  44.     }
  45.     return (
  46.         <>
  47.             <Head>
  48.                 <title>Book a Shoot </title>
  49.             </Head>
  50.  
  51.             <div className={`bg-[#F5F5F5]`}>
  52.                 <div className="container py-13">
  53.                     <h1 className={`font-unbounded font-semibold lg:text-title-xxl text-title-md3 text-black text-center mb-10`}>
  54.                         <span className={'text-radical-red-500'}>Book </span> a Shoot</h1>
  55.  
  56.                     <div className="bg-white px-[30px] lg:px-[100px] py-13.5">
  57.  
  58.                         {/*<Step />*/}
  59.                         <Stepper steps={steps} currentStep={currentStep} />
  60.  
  61.                         <div className={`mt-14`}>
  62.                             <StepperContext.Provider value={{}}>
  63.                                 {displayStep(currentStep)}
  64.                             </StepperContext.Provider>
  65.                         </div>
  66.  
  67.                         <StepperControl
  68.                         handleClick={handleClick}
  69.                         currentStep={currentStep}
  70.                         steps={steps}
  71.                         />
  72.  
  73.                     </div>
  74.                 </div>
  75.             </div>
  76.         </>
  77.     );
  78. };
  79.  
  80. export default BookNow;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement