From 7d4acc5ea898e602e860a79008b8a41d608bb054 Mon Sep 17 00:00:00 2001
From: JoelVR17 <vermudo.com@gmail.com>
Date: Sun, 23 Feb 2025 23:31:54 -0600
Subject: [PATCH] feat: implement JoyrideTutorial component for guided tours

---
 src/components/utils/ui/Joyride.tsx | 45 +++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/utils/ui/Joyride.tsx

diff --git a/src/components/utils/ui/Joyride.tsx b/src/components/utils/ui/Joyride.tsx
new file mode 100644
index 0000000..52a2162
--- /dev/null
+++ b/src/components/utils/ui/Joyride.tsx
@@ -0,0 +1,45 @@
+import Joyride from "react-joyride";
+import { steps } from "@/constants/steps/steps";
+import { useGlobalUIBoundedStore } from "@/core/store/ui";
+import { useJoyride } from "@/hooks/joyride.hook";
+
+const JoyrideTutorial = () => {
+  const theme = useGlobalUIBoundedStore((state) => state.theme);
+
+  const { run, stepIndex, handleJoyrideCallback } = useJoyride();
+  console.log(stepIndex);
+  return (
+    <Joyride
+      run={run}
+      steps={steps}
+      stepIndex={stepIndex}
+      continuous
+      showSkipButton
+      hideCloseButton={true}
+      callback={handleJoyrideCallback}
+      disableOverlayClose={true}
+      styles={{
+        options:
+          theme === "dark"
+            ? {
+                backgroundColor: "#19191B",
+                overlayColor: "rgba(0, 0, 0, 0.80)",
+                primaryColor: "#006BE4",
+                textColor: "#FFF",
+                width: 500,
+                zIndex: 1000,
+              }
+            : {
+                backgroundColor: "#FFFFFF",
+                overlayColor: "rgba(0, 0, 0, 0.60)",
+                primaryColor: "#006BE4",
+                textColor: "#000",
+                width: 500,
+                zIndex: 1000,
+              },
+      }}
+    />
+  );
+};
+
+export default JoyrideTutorial;