ChannelRow
Where clients reach the studio, beside the app's composer: a small icon per channel, the live ones in ink with a leaf dot, the rest quiet until they're connected. One label glides between them on hover; a tap opens Settings › Channels. At the composer row's end side by side; a phone leaves it out and reaches the channels through Settings.
Playground
Tap a channel
<ChannelRow
label="Channels"
channels={[
{ channel: "link", name: "Booking link", live: true },
{ channel: "instagram", name: "Instagram", live: false },
{ channel: "whatsapp", name: "WhatsApp", live: false },
]}
status={{ live: "Live", off: "Not connected" }}
onOpen={() => settings.open({ section: "channels" })}
/>API
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | The row's name: “Channels”. |
| channels | { channel, name, live }[] | — | An icon each, in order; live ones get the dot. |
| status | { live: string; off: string } | — | Said after each name, in its label and tooltip: “Booking link · Live”. |
| onOpen | (channel: Channel) => void | — | A tap: open the channel's settings. |
Guidelines
- Live is ink and a leaf dot; not yet is quiet ink, never hidden — the row says what's coming.
- Icons stand alone, so each button carries its full name, and one tooltip glides between them (a TooltipGroup), as on the rail.