Tour

import { Tour, TourStep, useTour, Button } from '@otfdashkit/ui'

function TourDemo() {
  const { start, isActive } = useTour()
  return (
    <div className="p-8 space-y-6">
      <div className="flex gap-3">
        <Button onClick={start} disabled={isActive}>Start Tour</Button>
        <span className="text-sm text-[hsl(var(--muted-foreground))] self-center">Click to begin the guided tour</span>
      </div>
      <div className="flex gap-4">
        <TourStep step={0} title="Welcome!" description="This is the main dashboard." placement="bottom">
          <div className="p-4 rounded border bg-card cursor-default">Dashboard KPIs</div>
        </TourStep>
        <TourStep step={1} title="Analytics" description="Dive deeper into trends." placement="bottom">
          <div className="p-4 rounded border bg-card cursor-default">Analytics Panel</div>
        </TourStep>
        <TourStep step={2} title="Team" description="Manage team members." placement="bottom">
          <div className="p-4 rounded border bg-card cursor-default">Team Settings</div>
        </TourStep>
      </div>
    </div>
  )
}

export function Example() {
  return (
    <Tour totalSteps={3}><TourDemo /></Tour>
  )
}