Carlos Florêncio
58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { IconRobot } from '@tabler/icons-react';
|
|
import type { SlashCommand } from '@/hooks/use-inline-slash';
|
|
import { PopupMenu, PopupMenuItem, useMenuItemRefs } from './popup-menu';
|
|
|
|
type SlashCommandMenuProps = {
|
|
isOpen: boolean;
|
|
position?: { x: number; y: number } | null;
|
|
clientRect?: (() => DOMRect | null) | null;
|
|
commands: SlashCommand[];
|
|
selectedIndex: number;
|
|
onSelect: (command: SlashCommand) => void;
|
|
onClose: () => void;
|
|
setSelectedIndex: (index: number) => void;
|
|
};
|
|
|
|
export function SlashCommandMenu({
|
|
isOpen,
|
|
position,
|
|
clientRect,
|
|
commands,
|
|
selectedIndex,
|
|
onSelect,
|
|
onClose,
|
|
setSelectedIndex,
|
|
}: SlashCommandMenuProps) {
|
|
const { setItemRef } = useMenuItemRefs(selectedIndex);
|
|
|
|
if (commands.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<PopupMenu
|
|
isOpen={isOpen}
|
|
position={position ?? null}
|
|
clientRect={clientRect}
|
|
title="Commands"
|
|
selectedIndex={selectedIndex}
|
|
onClose={onClose}
|
|
>
|
|
{commands.map((command, index) => (
|
|
<PopupMenuItem
|
|
key={command.id}
|
|
icon={<IconRobot className="h-4 w-4" />}
|
|
label={command.label}
|
|
description={command.description}
|
|
isSelected={selectedIndex === index}
|
|
onClick={() => onSelect(command)}
|
|
onMouseEnter={() => setSelectedIndex(index)}
|
|
itemRef={setItemRef(index)}
|
|
/>
|
|
))}
|
|
</PopupMenu>
|
|
);
|
|
}
|