solid_command_palette_basic_searchable_actions_quickstart.ts

1import { CommandPalette, Action } from 'solid-command-palette';
2import 'solid-command-palette/dist/style.css';
3import { Component, createSignal } from 'solid-js';
4
5const App: Component = () => {
6  const [isOpen, setIsOpen] = createSignal(false);
7
8  const actions: Action[] = [
9    {
10      id: 'home',
11      title: 'Go to Home',
12      shortcut: ['g', 'h'],
13      handler: () => {
14        console.log('Navigating to home...');
15      },
16    },
17    {
18      id: 'settings',
19      title: 'Open Settings',
20      shortcut: ['s'],
21      handler: () => {
22        console.log('Opening settings...');
23      },
24    },
25  ];
26
27  return (
28    <div>
29      <button onClick={() => setIsOpen(true)}>Open Command Palette (Ctrl+K)</button>
30      <CommandPalette
31        isOpen={isOpen()}
32        onChangeOpen={setIsOpen}
33        actions={actions}
34      />
35    </div>
36  );
37};
38
39export default App;