"use client"; import React from "react"; import { createPortal } from "react-dom"; import { motion, AnimatePresence } from "motion/react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardFooter, CardHeader, } from "@/components/ui/card"; import { X, ChevronLeft, ChevronRight } from "lucide-react"; export interface TourStep { target: string; title: string; description: string; placement?: "top" | "bottom" | "left" | "right"; offset?: { x?: number; y?: number }; } export interface TourProps { steps: TourStep[]; open?: boolean; onClose?: () => void; onFinish?: () => void; className?: string; maskClassName?: string; placement?: "top" | "bottom" | "left" | "right"; } const ARROW_SIZE = 8; const SPACING = 12; export function Tour({ steps, open = false, onClose, onFinish, className, placement: defaultPlacement = "bottom", }: TourProps) { const [currentStep, setCurrentStep] = React.useState(0); const [targetElement, setTargetElement] = React.useState( null ); const [position, setPosition] = React.useState({ top: 0, left: 0 }); const cardRef = React.useRef(null); const calculatePosition = React.useCallback(() => { if (!targetElement || !cardRef.current) return null; const targetRect = targetElement.getBoundingClientRect(); const cardRect = cardRef.current.getBoundingClientRect(); const placement = steps[currentStep].placement || defaultPlacement; const offset = steps[currentStep].offset || { x: 0, y: 0 }; let top = 0; let left = 0; switch (placement) { case "top": top = targetRect.top - cardRect.height - SPACING - ARROW_SIZE + (offset.y || 0); left = targetRect.left + (targetRect.width - cardRect.width) / 2 + (offset.x || 0); break; case "bottom": top = targetRect.bottom + SPACING + ARROW_SIZE + (offset.y || 0); left = targetRect.left + (targetRect.width - cardRect.width) / 2 + (offset.x || 0); break; case "left": top = targetRect.top + (targetRect.height - cardRect.height) / 2 + (offset.y || 0); left = targetRect.left - cardRect.width - SPACING - ARROW_SIZE + (offset.x || 0); break; case "right": top = targetRect.top + (targetRect.height - cardRect.height) / 2 + (offset.y || 0); left = targetRect.right + SPACING + ARROW_SIZE + (offset.x || 0); break; } // Ensure the card stays within viewport bounds const viewport = { width: window.innerWidth, height: window.innerHeight, }; top = Math.max( SPACING, Math.min(viewport.height - cardRect.height - SPACING, top) ); left = Math.max( SPACING, Math.min(viewport.width - cardRect.width - SPACING, left) ); return { top, left }; }, [targetElement, currentStep, steps, defaultPlacement]); const updatePosition = React.useCallback(() => { const newPosition = calculatePosition(); if (newPosition) { setPosition(newPosition); } }, [calculatePosition]); React.useEffect(() => { if (!open) return; const target = document.querySelector( steps[currentStep].target ) as HTMLElement; setTargetElement(target); if (target) { target.style.position = "relative"; target.style.zIndex = "60"; target.scrollIntoView({ behavior: "smooth", block: "center", inline: "center", }); } return () => { if (target) { target.style.position = ""; target.style.zIndex = ""; } }; }, [open, currentStep, steps]); React.useEffect(() => { if (!targetElement) return; updatePosition(); window.addEventListener("resize", updatePosition); window.addEventListener("scroll", updatePosition); return () => { window.removeEventListener("resize", updatePosition); window.removeEventListener("scroll", updatePosition); }; }, [targetElement, updatePosition]); if (!open) return null; const handleNext = () => { if (currentStep === steps.length - 1) { onFinish?.(); return; } setCurrentStep((prev) => prev + 1); }; const handlePrev = () => { setCurrentStep((prev) => prev - 1); }; const handleClose = () => { setCurrentStep(0); onClose?.(); }; const placement = steps[currentStep].placement || defaultPlacement; return createPortal( {open && ( <> {/* Overlay with cutout */} {/* Dark overlay sections */} {/* Tour card */}

Step {currentStep + 1} of {steps.length}

{steps[currentStep].title}

{steps[currentStep].description}

)} , document.body ); }

Interactive Product Tour

Welcome to Devsloka Ui

Feature 1

Feature 2

Feature 3

Install Dependencies