Tour in five frameworks

import * as React from 'react'
import { Tour, type TourStep } from '@hamur/react/tour'

interface Copy {
  title: string
  body: string
}

function XIcon() {
  return (
    <svg className="tour-icon" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M4 4l8 8M12 4l-8 8" />
    </svg>
  )
}

export default function TourExample() {
  const newFile = React.useRef<HTMLButtonElement>(null)
  const search = React.useRef<HTMLInputElement>(null)
  const settings = React.useRef<HTMLElement>(null)
  const steps = React.useMemo<TourStep<Copy>[]>(
    () => [
      {
        id: 'new-file',
        target: newFile,
        data: { title: 'Create a file', body: 'Start a blank document from the toolbar.' },
      },
      {
        id: 'search',
        target: search,
        data: { title: 'Find anything', body: 'Search file names and their contents.' },
      },
      {
        id: 'settings',
        target: settings,
        side: 'top',
        data: { title: 'Your settings', body: 'Turn autosave and sharing on or off here.' },
      },
    ],
    [],
  )
  return (
    <div className="tour-page">
      <div className="tour-toolbar">
        <button ref={newFile} type="button" className="button">
          New file
        </button>
        <input
          ref={search}
          className="input tour-search"
          aria-label="Search files"
          placeholder="Search files"
        />
      </div>
      <section ref={settings} className="tour-settings" aria-label="Settings">
        <label className="row">
          <input type="checkbox" defaultChecked />
          Autosave
        </label>
        <label className="row">
          <input type="checkbox" />
          Share with my team
        </label>
      </section>
      <Tour.Root steps={steps}>
        {({ step }) => (
          <>
            <Tour.Trigger className="button">
              Take the tour
            </Tour.Trigger>
            <Tour.Portal>
              <Tour.Backdrop className="backdrop" />
              <Tour.Spotlight className="tour-spotlight" />
              <Tour.Positioner className="tour-positioner">
                <Tour.Popup className="popover tour-popup">
                  <Tour.Arrow className="arrow" />
                  <div className="tour-head">
                    <Tour.Progress className="tour-progress" />
                    <Tour.Close className="tour-close" aria-label="Close tour">
                      <XIcon />
                    </Tour.Close>
                  </div>
                  <Tour.Title className="popover-title">
                    {step?.data?.title}
                  </Tour.Title>
                  <Tour.Description className="muted">
                    {step?.data?.body}
                  </Tour.Description>
                  <div className="tour-footer">
                    <Tour.Skip className="tour-skip" />
                    <Tour.Previous className="button" />
                    <Tour.Next className="button" />
                  </div>
                </Tour.Popup>
              </Tour.Positioner>
            </Tour.Portal>
          </>
        )}
      </Tour.Root>
    </div>
  )
}