Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 1008x 1008x 180x 828x 4x | import { CommandBinding, useScrollOnSelected } from "just-search-it";
import { DialogClose } from "../ahuora-design-system/ui/dialog";
import { ToolTipCover } from "../ahuora-design-system/ui/tooltip";
import { KeyboardShortcuts } from "./KeyboardShortcuts";
export function CommandFeature({
selected,
commandBinding,
}: {
selected?: boolean;
commandBinding?: CommandBinding<any>;
}) {
const scrollRef = useScrollOnSelected(selected);
if (!commandBinding) {
return null;
}
return (
<ToolTipCover asChild content={commandBinding.metadata.description}>
<DialogClose asChild aria-label={commandBinding.metadata.name}>
<div
ref={scrollRef}
onClick={() => {
commandBinding.run();
}}
className={`flex items-center w-full h-full p-5 rounded-md cursor-pointer transition-colors hover:bg-secondary ${selected ? "bg-secondary shadow" : "bg-muted"}`}
>
<div className="flex flex-col flex-1">
<div className="flex items-center">
<span className="text-4xl mr-4 flex-shrink-0">
{commandBinding.metadata.icon}
</span>
<span className="font-semibold text-lg">
{commandBinding.metadata.name}
</span>
<KeyboardShortcuts
shortcuts={commandBinding.metadata.shortcuts}
/>
</div>
<span className="text-muted-foreground text-sm mt-1">
{commandBinding.metadata.description}
</span>
</div>
</div>
</DialogClose>
</ToolTipCover>
);
}
|