Panel

The surface a task is done on, and the parts a task is asked in.

empty

Nothing has been asked yet

one part, with the sentence a reader needs first

Select pair

Choose the tokens you want to provide liquidity for.

EXAMPLE-A

EXAMPLE-B

a titled panel, which is a section of a page

Fee tier

The fee earned on every swap through this position.

What a tier is

Example — a well recedes onto the darker ground and draws no line.

several parts, which is what sets the rhythm

Fee tier

The fee earned on every swap through this position.

0.30% — example

Deposit amounts

EXAMPLE-A

Example data. Nothing here reaches a chain.

Range

Full range — example

Usage

import { Panel, Part } from '@luxfi/ui/read'

<Panel>
  <Part id="pair" title="Select pair" note="Choose the tokens to provide liquidity for.">
    <Pickers labelledBy="pair" />
  </Part>
  <Part title="Deposit amounts">
    <Field label="LUX" value={amount} onChangeText={setAmount} />
  </Part>
</Panel>

A ticket is the whole of a screen and draws no frame, because it is the page's subject. A wizard step is not: the steps sit beside it, so work that is one of several stages needs an edge or a reader cannot tell the stage from the page.

Part is the naming and Panel is the surface, and a Panel given a title is a Panel holding one Part. Two facts, independent: whether a thing stands on a surface, and whether it is named. What goes inside belongs to the screen, which is what lets one panel hold a pair of pickers on one step and a range on the next without knowing which it is holding.

Panel

Prop	Type	Required
`title`	`ReactNode`	no
`note`	`ReactNode`	no
`level`	`'h2' \| 'h3'`	no
`face`	`'card' \| 'well'`	no
`children`	`ReactNode`	no

Titled, a panel is a section of a page and says so: the heading names the region and one id binds the two, so the name a reader sees is the name the region has. Untitled, it is the sheet a task is done on, and what stands on it carries its own names.

face is the surface itself. A card frames on the page's own ground inside a hairline; a well recedes onto the darker ground and draws no line. The reference draws these two and no third, so which one a thing takes is what says whether it is a surface or something set into a surface.

Either way one inset and one rhythm: paint.card or paint.well at the corner that face is cut at, $4 of padding, $4 between children.

Part

Prop	Type	Required
`title`	`ReactNode`	yes
`id`	`string`	no
`note`	`ReactNode`	no
`level`	`'h2' \| 'h3'`	no
`children`	`ReactNode`	no

level is the heading's rank in the page's outline. A block inside a block is an h3.

id names the heading, so a control below it can be labelled by the same words a reader sees rather than by a second copy of them that drifts — Choice takes it as labelledBy. note is one sentence or none, set solid under the heading so the two read as one block.

Paint Presets