import TourGuide from '@gajendra-naphade/react-web-guide';
import '@gajendra-naphade/react-web-guide/dist/styles.css';
import { useRef } from 'react';

function App() {
  const buttonRef = useRef(null);
  const tourSteps = [
    {
      ref: buttonRef,
      name: "Guide",
      color: "black",
      message: "This is the header section of your page",
      offsetX: 0,
      offsetY: 0,
      CursorMessageGap:10,
    },
    // Add more steps
  ];

  return (
    <div>
      <button ref={buttonRef}>Start</button>
      <TourGuide
        steps={tourSteps}
        onComplete={() => console.log('Tour completed!')}
      />
    </div>
  );
}

import { useRef } from 'react';
import TourGuide from '@gajendra-naphade/react-web-guide';
import '@gajendra-naphade/react-web-guide/dist/styles.css';

function App() {
  const buttonRef = useRef(null);
  const featureRef = useRef(null);
  const settingsRef = useRef(null);

  const tourSteps = [
    {
      ref: buttonRef,
      name: "Welcome",
      message: "Start your journey here!",
      color: "#ff6b6b",
      CursorMessageGap: 10
    },
    {
      ref: featureRef,
      name: "Features",
      message: "Explore our amazing features!",
      color: "#4CAF50",
      offsetX: 20,
      offsetY: 10
    },
    {
      ref: settingsRef,
      name: "Settings",
      message: "Customize your experience here",
      color: "#2196F3",
      CursorMessageGap: 15
    }
  ];

  return (
    <div>
      <button ref={buttonRef}>Start</button>
      <div ref={featureRef}>Features</div>
      <div ref={settingsRef}>Settings</div>
      <TourGuide
        steps={tourSteps}
        onComplete={() => console.log('Tour completed!')}
        startButtonText="Begin Tour"
        skipButtonText="End Tour"
        minimizedStartText="Start"
        minimizedSkipText="Skip"
        showProgress={true}
        Theme="Dark"
        Minimized={true}
        showTooltip={true}
        buttonPosition={{
          bottom: '2rem',
          right: '2rem'
        }}
        messageClass="custom-message"
        nextButtonText="Next Step"
        nextButtonContinueText="Continue"
        nextButtonClassName="custom-next-button"
      />
    </div>
  );
}