Workspace Switcher

#Installation & usage

Requires cmdk, an optional dependency. Import it from @youj/react/workspace-switcher.

Use it at the top of a Sidebar, or at the start of an App Header, when people belong to several workspaces and move between them often. The trigger always says which one they're in. The list is searchable, so it holds up at 3 workspaces or 300. For a short list that sits among other account items, the workspaces option of the Account Menu is enough.

import { WorkspaceSwitcher, type Workspace } from '@youj/react/workspace-switcher'

const workspaces: Workspace[] = [
  { id: 'northwind', name: 'Northwind Labs', detail: 'Pro · 12 members' },
  { id: 'acme', name: 'Acme Corp', detail: 'Enterprise · 148 members' },
]

export function Switcher() {
  const [workspace, setWorkspace] = useState('northwind')
  return <WorkspaceSwitcher workspaces={workspaces} value={workspace} onValueChange={setWorkspace} onCreate={createWorkspace} />
}

Each workspace has an id, a name, an optional logo (its initials show until the image loads, or if it fails) and an optional detail line such as the plan or member count. The trigger shows the current one, and the list marks it with a check. It's controlled with value and onValueChange, or uncontrolled with defaultValue.

#Creating a workspace

Pass onCreate and a "Create workspace" row sits under the list. It carries what was typed in the search, so someone who looks for a workspace that isn't there can press Enter to create it with that name: with no match left, the create row is the active one. onCreate receives the trimmed search text, which is empty when nothing was typed. Rename the row with createLabel. Search is plain substring matching, so a new name never fuzzily matches an existing one.

#Description

#Code