Dashboard.tsx

import { Outlet } from "react-router-dom";

import PrivateHeader from "./PrivateHeader";
import PrivateFooter from "./PrivateFooter";
import Sidebar from "../Sidebar";
import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';
import { useState } from "react";
interface State {
  run: boolean;
  steps: Step[];
}
const PrivateLayout = ({ children }: any) => {
  const [{ run, steps }] = useState<State>({
    run: true,
    steps: [
      {
        content: <h2>Let's begin our journey!</h2>,
        locale: { skip: <strong>SKIP</strong> },
        placement: "center",
        target: "body"
      },
      {
        content: <h2>Here is first step!</h2>,
        placement: "top",
        target: "#worklog",
        title: "First step"
      },
      {
        content: <h2>Here is first step!</h2>,
        placement: "bottom-end",
        target: "#step-1",
        title: "First step"
      },
      {
        content: <h2>Here is second step!</h2>,
        placement: "bottom-end",
        target: "#step-2",
        title: "Second step"
      },
    ]
  });
  return (
    <>
      <Joyride
        continuous
        callback={() => { }}
        run={run}
        steps={steps}
        hideCloseButton
        scrollToFirstStep
        showSkipButton
        showProgress={false}
      />
      <button
        data-drawer-target="default-sidebar"
        data-drawer-toggle="default-sidebar"
        aria-controls="default-sidebar"
        type="button"
        className="hidden p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
      >
        <span className="sr-only">Open sidebar</span>
        <svg
          className="w-6 h-6"
          aria-hidden="true"
          fill="currentColor"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            clipRule="evenodd"
            fillRule="evenodd"
            d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
          ></path>
        </svg>
      </button>
      <Sidebar />

      <div className=" sm:ml-72 w-full">
        <PrivateHeader />
        {children}
        <Outlet />
        <PrivateFooter />
      </div>
    </>
  );
};

export default PrivateLayout;