Usage

import { Wizard, type Step } from '@luxfi/ui/read'

<Wizard
  title="New position"
  trail={<Breadcrumb from="/positions" name="Positions" />}
  steps={[
    { name: 'Select pair', note: t('step', { n: 1 }) },
    { name: 'Set fee tier', note: t('step', { n: 2 }) },
  ]}
  now={now}
  go={setNow}
>
  <Panel>{/* the step's own work */}</Panel>
</Wizard>

Opening a position is a sequence, not a form. Drawn as a single centred card it reads as a small form that has asked for two tokens and stopped — a person cannot see that anything follows, so the screen looks broken rather than partly done. The steps go down the left because that is where the shape of the task lives; below the width that holds both tracks the work drops under the list, in the same order read down instead of across.

Props

now counts from zero. go makes the list the way through the task as well as the map of it: a step behind the one in hand becomes the control that returns to it. Nothing ahead is ever pressable — a step is reached by answering the one before it, which is what makes it a step. Without go the list is a list.

top is how far down the page the list of steps comes to rest — the height of whatever the application floats over its own scroll, which is a fact about the page rather than about the task. Left unsaid the list rests against the top of the viewport, which is right for a page with nothing floating over it.

trail is rendered rather than routed. Navigation belongs to the application, and a component that took an href would need the application's router to follow it. aside holds the controls belonging to the task rather than to a step — a reset, a version, a setting — top right, out of the reading order of the work.

Step

note is the small line over the name — its rank in the sequence, said in words. The words are the caller's, because they are copy and this package ships none: a wizard that numbered its own steps would be writing English into every language.