Resource Switcher

import * as React from 'react'
import { ResourceSwitcher, type ResourceSwitcherItem } from 'ferry-ui'
import { FolderKanban } from 'lucide-react'

const PROJECTS: ResourceSwitcherItem[] = [
  { id: 'billing-portal', label: 'Billing portal', icon: <FolderKanban /> },
  { id: 'customer-app', label: 'Customer app', icon: <FolderKanban /> },
  { id: 'status-page', label: 'Status page', icon: <FolderKanban /> },
  { id: 'data-export', label: 'Data export', icon: <FolderKanban /> },
]

export default function ResourceSwitcherHero() {
  const [project, setProject] = React.useState('billing-portal')

  return (
    <ResourceSwitcher
      label="switch project"
      searchPlaceholder="Find a project…"
      items={PROJECTS}
      value={project}
      onValueChange={setProject}
    />
  )
}

import * as React from 'react'
import { ResourceSwitcher, toast, type ResourceSwitcherAction, type ResourceSwitcherItem } from 'ferry-ui'
import { FolderKanban, LayoutGrid, Plus } from 'lucide-react'

const PROJECTS: ResourceSwitcherItem[] = [
  { id: 'billing-portal', label: 'Billing portal', icon: <FolderKanban /> },
  { id: 'customer-app', label: 'Customer app', icon: <FolderKanban /> },
  { id: 'status-page', label: 'Status page', icon: <FolderKanban /> },
]

// A real app opens a page or a dialog from `onSelect`.
const ACTIONS: ResourceSwitcherAction[] = [
  { id: 'all', label: 'All projects', icon: <LayoutGrid />, onSelect: () => toast('The list of projects opens here') },
  { id: 'new', label: 'New project…', icon: <Plus />, onSelect: () => toast('The dialog for a new project opens here') },
]

export default function ResourceSwitcherActions() {
  const [project, setProject] = React.useState('billing-portal')

  return (
    <ResourceSwitcher
      label="switch project"
      heading="Projects"
      items={PROJECTS}
      value={project}
      onValueChange={setProject}
      actions={ACTIONS}
    />
  )
}

import { ResourceSwitcher, StatusDot, type ResourceSwitcherItem } from 'ferry-ui'
import { UsersRound } from 'lucide-react'

const TEAMS: ResourceSwitcherItem[] = [
  {
    id: 'design',
    label: 'Design',
    icon: <UsersRound />,
    description: '8 members, Pro plan',
    meta: <StatusDot tone="success" label="Active" />,
  },
  {
    id: 'engineering',
    label: 'Engineering',
    icon: <UsersRound />,
    description: '24 members, Pro plan',
    // The query "developers" finds this team.
    keywords: ['developers'],
    meta: <StatusDot tone="success" label="Active" />,
  },
  {
    id: 'growth',
    label: 'Growth',
    icon: <UsersRound />,
    description: '5 members, trial ends in 3 days',
    meta: <StatusDot tone="warning" label="Trial" />,
  },
  { id: 'support', label: 'Support', icon: <UsersRound />, description: 'Archived team', disabled: true },
]

export default function ResourceSwitcherRichItems() {
  // Uncontrolled: the component holds the current team.
  return <ResourceSwitcher label="switch team" heading="Teams" items={TEAMS} defaultValue="engineering" />
}

import { ResourceSwitcher, type ResourceSwitcherItem } from 'ferry-ui'
import { FolderKanban } from 'lucide-react'

const PROJECTS: ResourceSwitcherItem[] = [
  { id: 'billing-portal', label: 'Billing portal', icon: <FolderKanban /> },
  { id: 'customer-app', label: 'Customer app', icon: <FolderKanban /> },
]

const NO_PROJECTS: ResourceSwitcherItem[] = []

export default function ResourceSwitcherStates() {
  return (
    <>
      {/* The items are not there yet: the trigger shows a skeleton. */}
      <ResourceSwitcher label="switch project" items={NO_PROJECTS} value="billing-portal" loading />
      {/* No current item: the trigger shows the placeholder. */}
      <ResourceSwitcher label="switch project" items={PROJECTS} placeholder="Select a project…" />
      <ResourceSwitcher label="switch project" items={PROJECTS} defaultValue="customer-app" disabled />
    </>
  )
}

import * as React from 'react'
import { ResourceSwitcher, type ResourceSwitcherItem } from 'ferry-ui'
import { Building2 } from 'lucide-react'

const WORKSPACES: ResourceSwitcherItem[] = [
  { id: 'acme', label: 'Acme', icon: <Building2 /> },
  { id: 'acme-labs', label: 'Acme Labs', icon: <Building2 /> },
  { id: 'acme-europe', label: 'Acme Europe', icon: <Building2 /> },
]

export default function ResourceSwitcherCustomTrigger() {
  const [workspace, setWorkspace] = React.useState('acme-labs')
  const current = WORKSPACES.find((item) => item.id === workspace)

  return (
    <ResourceSwitcher
      label="switch workspace"
      items={WORKSPACES}
      value={workspace}
      onValueChange={setWorkspace}
      icon={
        <span className="flex size-5 items-center justify-center rounded-sm bg-primary-soft text-[10px] font-medium text-primary">
          {current?.label.charAt(0)}
        </span>
      }
    >
      {`Workspace: ${current?.label}`}
    </ResourceSwitcher>
  )
}