1 files changed, 46 insertions, 0 deletions
diff --git a/src/demos/CommandPaletteDemo.tsx b/src/demos/CommandPaletteDemo.tsx
new file mode 100644
index 0000000..e3c4119
--- /dev/null
+++ b/src/demos/CommandPaletteDemo.tsx
@@ -0,0 +1,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="命令面板"
+      />
+    </>
+  )
+}