ProductSwitcher
$ npx shadcn@latest add https://lacodda.github.io/dowel/r/product-switcher.jsonThe line’s products are meant to be used together, and a person moving between them was typing addresses from memory.
<ProductSwitcher current="kasl-server" currentName="kasl-server" label={t('switchProduct')} products={[ { product: 'rigger', name: 'rigger', href: config.riggerUrl }, { product: 'kasl', name: 'kasl', description: t('kasl.what'), onSelect: openKasl }, ]}/>It knows no addresses. Which products a person has, and on which host, is the deployment’s to say, so the list, its order and every address come from the caller.
A place is a link, an action is an action. An entry with href renders
as an <a>, so a middle click opens it in a new tab the way a person moving
between web products expects. An entry with onSelect runs it — a desktop
product opening another by launching it.
The current product is not in the menu. It is on the trigger; listing it again offers a choice that changes nothing.
Props
Read from the types in ui/product-switcher.tsx, the file a product copies - so the description of each prop is also what an editor shows over it there.
| Prop | Type | Default | |
|---|---|---|---|
currentrequired | atlas | austeris | dowel | efema | furca | hilvan | kasl | kasl-server | kilna | lacodda | lyrid | lyrn | midda | nitid | nooma | rhapsod | rigger | scheda | sefy | turnout | The product this is. | |
currentNamerequired | string | Its name, shown on the trigger. | |
productsrequired | SwitcherProduct[] | The others, in the order to offer them. | |
labelrequired | string | What the trigger does, for a reader: "Switch product". | |
className | string |
Accessibility
The examples on the stand, through axe 4.14.0 in a browser, in both themes, against WCAG 2.2 A and AA and axe's best practices: 13 rules applied and passed, and none failed. The accessibility report has every item.
Left to a person, where axe could not decide: color-contrast.
History
Each release that changed ui/product-switcher.tsx - the file a product copies - newest first.