Files
twenty_crm/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
2023-12-10 18:10:54 +01:00

46 lines
1.1 KiB
TypeScript

import { IconArrowUpRight } from '@/ui/display/icon';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { MenuItemCommand } from '@/ui/navigation/menu-item/components/MenuItemCommand';
import { useCommandMenu } from '../hooks/useCommandMenu';
export type CommandMenuItemProps = {
label: string;
to?: string;
id: string;
onClick?: () => void;
Icon?: IconComponent;
firstHotKey?: string;
secondHotKey?: string;
};
export const CommandMenuItem = ({
label,
to,
id,
onClick,
Icon,
firstHotKey,
secondHotKey,
}: CommandMenuItemProps) => {
const { onItemClick } = useCommandMenu();
if (to && !Icon) {
Icon = IconArrowUpRight;
}
const { isSelectedItemId } = useSelectableList({ itemId: id });
return (
<MenuItemCommand
LeftIcon={Icon}
text={label}
firstHotKey={firstHotKey}
secondHotKey={secondHotKey}
onClick={() => onItemClick(onClick, to)}
isSelected={isSelectedItemId}
/>
);
};