supabase/apps/design-system/registry/default/example/commandmenu-subpage.tsx

import { useMemo } from 'react'
import { Button } from 'ui'
import {
  CommandMenu,
  CommandMenuInput,
  CommandMenuList,
  CommandMenuTrigger as CommandMenuTriggerPrimitive,
  CommandProvider,
  PageType,
  useRegisterCommands,
  useRegisterPage,
  useSetPage,
} from 'ui-patterns/CommandMenu'

function Commands() {
  const setPage = useSetPage()

  const commands = useMemo(
    () => [
      {
        id: 'subcommand',
        name: 'Subcommand',
        action: () => alert('Triggered from subpage'),
      },
    ],
    []
  )

  useRegisterPage(
    'Subpage',
    {
      type: PageType.Commands,
      sections: [
        {
          id: 'subpage',
          name: 'Subpage',
          commands,
        },
      ],
    },
    { deps: [commands] }
  )

  useRegisterCommands('Commands', [
    {
      id: 'subpage',
      name: 'Go to subpage',
      action: () => setPage('Subpage'),
    },
  ])

  return null
}

function CommandMenuTrigger() {
  return (
    <CommandMenuTriggerPrimitive>
      <Button>Open command menu</Button>
    </CommandMenuTriggerPrimitive>
  )
}

export default function CommandMenuDemo() {
  return (
    <CommandProvider openKey="">
      <Commands />
      <CommandMenu trigger={<CommandMenuTrigger />}>
        <CommandMenuInput />
        <CommandMenuList />
      </CommandMenu>
    </CommandProvider>
  )
}