47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { Button } from "@mantine/core";
|
|
import { Command } from "cmdk";
|
|
import { useState } from "react";
|
|
|
|
export default function CmdkTestDemo() {
|
|
const [opened, setOpened] = useState(false);
|
|
|
|
const actions = [
|
|
{ id: "1", label: "First", description: "First panel" },
|
|
{ id: "2", label: "Second", description: "Second panel" },
|
|
{ id: "3", label: "Third", description: "Third panel" },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Button onClick={() => setOpened(true)} variant="default" mb="md">
|
|
Open Command Menu (Ctrl + K)
|
|
</Button>
|
|
|
|
<Command.Dialog
|
|
open={opened}
|
|
onOpenChange={() => setOpened(false)}
|
|
label="Global Command Menu"
|
|
>
|
|
<Command.Input placeholder="Search Tab ..." autoFocus />
|
|
|
|
<Command.List>
|
|
<Command.Empty>No results found.</Command.Empty>
|
|
|
|
<Command.Group>
|
|
{actions.map((action) => (
|
|
<Command.Item key={action.id}>
|
|
<div>
|
|
<div>{action.label}</div>
|
|
<small style={{ color: "var(--mantine-color-dimmed)" }}>
|
|
{action.description}
|
|
</small>
|
|
</div>
|
|
</Command.Item>
|
|
))}
|
|
</Command.Group>
|
|
</Command.List>
|
|
</Command.Dialog>
|
|
</>
|
|
);
|
|
}
|