import * as React from "react"; import { TutorialStepperFeatureTourOverlaySeven } from "@/registry/tutorial-stepper-feature-tour-overlay-seven/tutorial-stepper-feature-tour-overlay-seven"; import { Button } from "@/components/ui/button"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; export function TutorialStepperFeatureTourOverlaySevenDemo() { const [open, setOpen] = React.useState(false); const steps = [ { id: "welcome", title: "Welcome to the new dashboard!", description: (

We've redesigned the interface to make it easier to navigate and more powerful.

Let us show you around the key features.

), media: (

👋

), }, { id: "sidebar", title: "New Navigation Sidebar", description: (

Access all your workspaces and projects from the new sidebar on the left.

Click the workspace switcher to jump between different teams.

), media: (

📊

), targetElement: "#sidebar", }, { id: "command", title: "Quick Command Palette", description: (

Press Cmd+K (or Ctrl+K on Windows) to open the command palette.

Search for any action, navigate to pages, or change settings instantly.

), media: (

⌘K

), }, { id: "notifications", title: "Real-time Notifications", description: (

Stay updated with the new notification center in the top-right corner.

Get alerts for mentions, comments, and important updates.

), media: (

🔔

), targetElement: "#notifications", }, { id: "complete", title: "You're all set!", description: (

You can always replay this tour from the help menu.

Enjoy exploring the new features!

), media: (

🎉

), }, ]; return (

Feature Tour Demo

Click the button below to start the interactive product tour.

setOpen(false)} onComplete={() => console.log("Tour completed!")} />

); } export default TutorialStepperFeatureTourOverlaySevenDemo;

Simple