src/demos/CommandPaletteDemo.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

import { useMemo, useState } from 'react'
import { Button } from '@astryxdesign/core/Button'
import { CommandPalette } from '@astryxdesign/core/CommandPalette'
import { HStack } from '@astryxdesign/core/HStack'
import { useToast } from '@astryxdesign/core/Toast'
import { createStaticSource } from '@astryxdesign/core/Typeahead'

export function CommandPaletteDemo() {
  const [open, setOpen] = useState(false)
  const showToast = useToast()
  const source = useMemo(
    () =>
      createStaticSource([
        { id: 'home', label: '回到概览' },
        { id: 'components', label: '浏览组件' },
        { id: 'about', label: '查看关于' },
        { id: 'theme', label: '切换主题' },
      ]),
    [],
  )

  return (
    <>
      <HStack gap={2} wrap="wrap">
        <Button
          label="打开命令面板"
          variant="primary"
          onClick={() => setOpen(true)}
        />
        <Button
          label="显示通知"
          variant="secondary"
          onClick={() =>
            showToast({ body: '设置已保存', type: 'info' })
          }
        />
      </HStack>
      <CommandPalette
        isOpen={open}
        onOpenChange={setOpen}
        searchSource={source}
        label="命令面板"
      />
    </>
  )
}