Command palette (⌘K)

import {
	CommandDialog,
	CommandTrigger,
	useCommandShortcut,
} from "@moodinary/ui/components/command";
import { useCallback } from "react";

const items = [
	{
		group: "Páginas",
		id: "inicio",
		label: "Inicio",
		onSelect: () => undefined,
	},
	{
		group: "Páginas",
		id: "analiticas",
		label: "Analíticas",
		onSelect: () => undefined,
	},
	{
		group: "Ajustes",
		id: "miembros",
		keywords: "ajustes configuración",
		label: "Miembros y equipos",
		onSelect: () => undefined,
	},
	{
		group: "Acciones",
		id: "qr",
		keywords: "qr código compartir pulso imprimir",
		label: "Mostrar QR",
		onSelect: () => undefined,
	},
	{
		group: "Organizaciones",
		id: "escuela",
		label: "Escuela de ejemplo",
		onSelect: () => undefined,
		trailing: "Actual",
	},
	{
		group: "Organizaciones",
		id: "empresa",
		label: "Empresa de ejemplo",
		onSelect: () => undefined,
	},
	{
		group: "Cuenta",
		id: "notificaciones",
		label: "Notificaciones",
		onSelect: () => undefined,
	},
];
export default function CommandPalette() {
	const [open, setOpen] = useCommandShortcut();
	const show = useCallback(() => setOpen(true), [setOpen]);
	return (
		<>
			<CommandTrigger onClick={show} />
			<CommandDialog items={items} onOpenChange={setOpen} open={open} />
		</>
	);
}