Docs
Chat
ChatHeader

ChatHeader

Top bar of the chat pane with channel path, topic text, and action buttons. Also exports ChatHeaderAction for the button style.

Import

import { ChatHeader } from "@gumtree/ui/chat/ChatHeader";

Props

Prop	Type	Default	Description
`path`*	`string`	-	Channel path (e.g. '!necessary/example-app')
`channelType`	`"auto" \| "custom"`	`"auto"`	Controls path color (orange for auto, green for custom)
`topic`	`string`	-	Channel topic text
`actions`	`ComponentChildren`	-	Action buttons (use ChatHeaderAction)

Examples

Auto Channel with Actions

!necessary/example-appFull-stack web application with i18n, CI, and plugin support · 3 open PRs

📌 Pins🔍 SearchIRC client ↗

<ChatHeader
  path="!necessary/example-app"
  topic="Full-stack web application with i18n, CI, and plugin support · 3 open PRs"
  actions={<>
    <ChatHeaderAction>📌 Pins</ChatHeaderAction>
    <ChatHeaderAction>🔍 Search</ChatHeaderAction>
    <ChatHeaderAction href="#">IRC client ↗</ChatHeaderAction>
  </>}
/>

Custom Channel

#designUI mockups, prototypes, and design-system discussion

<ChatHeader path="#design" channelType="custom" topic="UI mockups, prototypes, and design-system discussion" />