Site Brand Switcher

Brand Switcher

Zostel, Zostel Homes, Zostel Plus — and Zo. One dialect per surface; this is how you cross between them.

Preview

One dialect per surface: a Zostel page speaks Zostel, a Zo Trips page speaks Zo.

Usage

tsx

import { BrandSwitcher } from "zostel-ui";

{/* links to each brand */}
<BrandSwitcher activeBrand="Zostel" />

{/* or handle the change yourself */}
<BrandSwitcher activeBrand={brand} onBrandChange={(b) => setBrand(b.name)} />

Props

Prop	Type	Default	Description
`brands`	`{ name; href; description? }[]`	`the Zostel and Zo family`	The brands.
`activeBrand`	`string`	`"Zostel"`	The name on the button.
`onBrandChange`	`(brand) => void`	—	With it, items are actions; without it, links to href.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

brands

Type: { name; href; description? }[]

Default: the Zostel and Zo family

The brands.

activeBrand

Type: string

Default: "Zostel"

The name on the button.

onBrandChange

Type: (brand) => void

Default: —

With it, items are actions; without it, links to href.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).