videorc/uiPlatform Filter
The one platform filter for the Stream Manager's chat and Activity. An All chip and a chip per platform mark, and the same choice as radio items for a Filters menu. Nothing at all with one platform.
Installation
$ pnpm dlx shadcn@latest add @videorc/platform-filterUsage
import {
PlatformFilter,
PlatformFilterMenuItems,
} from "@/components/blocks/stream-manager/platform-filter";<PlatformFilter
label="Show chat from"
onValueChange={setPlatform}
platforms={["youtube", "twitch", "x"]}
value={platform}
/>Chat and Activity share it, so a platform filters the same way in both. A chip clicked again turns back to All. With one platform it renders nothing: there's nothing to filter by.
Below 640 px of Stream Manager the chips move into the pane's Filters menu: put PlatformFilterMenuItems inside a Dropdown Menu, with the same props. Chat Toolbar does both.
Theming
| Token or attribute | Meaning |
|---|---|
ToggleGroup | The chips; the chosen one is the chrome plate |
ChatPlatformIcon | Each platform's 20 px mark |
Accessibility
The group is named by label ("Show chat from"). Each icon chip is named by its platform and says "Only YouTube" on hover. In the menu, the choice is a radio group under the same label, with "Every platform" first.
API reference
PlatformFilter
Prop
Type
PlatformFilterMenuItems
The same props, as a labelled radio group for a Filters menu.
Stream Manager Status Bar
The Stream Manager's 32 px status bar. Each destination's chat state as its mark and a dot, a word only when something needs the streamer, and the window's labelled controls, folding into one ⋯ menu below 640 px.
Chat Platform
The Stream Manager's platform vocabulary. One name per platform, its 20 px mark in its brand tint, and a destination's chat state in the words every window shares.