Commands() — supabase Function Reference

Source Code

apps/design-system/registry/default/example/commandmenu-conditional.tsx lines 12–48

function Commands() {
  const [activeCommand, setActiveCommand] = useState(1)

  const toggleCommands = () => setActiveCommand((state) => (state === 1 ? 2 : 1))

  const commandOne = useMemo(
    () => [
      {
        id: 'one',
        name: 'One',
        action: () => alert('One'),
      },
    ],
    []
  )

  const commandTwo = useMemo(
    () => [
      {
        id: 'two',
        name: 'Two',
        action: () => alert('Two'),
      },
    ],
    []
  )

  const command = activeCommand === 1 ? commandOne : commandTwo

  useRegisterCommands('Commands', command, { deps: [command] })

  return (
    <Button onClick={toggleCommands}>
      {activeCommand === 1 ? 'Change command to command two' : 'Change command to command one'}
    </Button>
  )
}