focalxaiinspection/src/lib/Pages/OnboardingPage/OnboardingPage.js

Focalx AI Inspection

import React, { useRef } from 'react';
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import './OnboardingPage.scss';
import SwiperCore, { Pagination, Navigation } from "swiper";
import { useNavigate } from "react-router-dom";

SwiperCore.use([Pagination, Navigation]);
const data = [
  {
    image: require('../../Assets/images/onboarding-carousel-car-01.png'),
    title: 'Clean up the car',
    description: 'Confirm that you have cleaned the car before inspection',
  },
  {
    image: require('../../Assets/images/onboarding-carousel-car-02.png'),
    title: 'Make sure to have space around the car',
    description: 'Confirm that you have enough space around the car before inspection',
  },
  {
    image: require('../../Assets/images/onboarding-carousel-car-03.png'),
    title: 'Keep your distance',
    description: 'Confirm that you are keeping a distance of 1 meter to capture the complete car on camera',
  },
];

const OnboardingPage = () => {
  const _swiperRef = useRef(null);
  const navigate = useNavigate();

  const handleNext = () => {
    if (_swiperRef.current) {
      const swiper = _swiperRef.current.swiper;
      if (swiper.isEnd) {
        navigate('/car-information');
      } else {
        swiper.slideNext();
      }
    }
  };

  const handleBack = () => {
    if (_swiperRef.current) {
      const swiper = _swiperRef.current.swiper;
      if (swiper.activeIndex === 0) {
        navigate('/');
      } else {
        swiper.slidePrev();
      }
    }
  };

  return (
    <>
      <main>
        <div className='onboarding-section'>      
          <Swiper 
            pagination={{ clickable: true }} 
            modules={[Pagination]} 
            className="swiper" 
            id='onboarding-carousel'
            ref={_swiperRef}
          >
            {data.map((item, index) => (
            <SwiperSlide key={index}>
              <img src={item.image} alt='' />
              <div className='slide-details'>
                <h3>{item.title}</h3>
                <p>{item.description}</p>
              </div>
            </SwiperSlide>
          ))}
          </Swiper>
        </div>
       
        <div className="action-btn-wrap bottom-action-btns">
          <button className="custom-secondary-outline-button left-side-btn justify-content-center" onClick={handleBack}>Back</button>
          <button className="custom-primary-button right-side-btn justify-content-center" onClick={handleNext}>Next</button>
        </div>
      </main>
    </>
  );
};

export default OnboardingPage;