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 49 50 | 2330x 2330x 22x 2308x 31x 31x 31x | import { CommandBinding, useScrollOnSelected } from "just-search-it";
import { DialogClose } from "../ahuora-design-system/ui/dialog";
import { ToolTipCover } from "../ahuora-design-system/ui/tooltip";
import { Button } from "@/ahuora-design-system/ui/button";
import { KeyboardShortcuts } from "./KeyboardShortcuts";
export function CommandFeature({
selected,
commandBinding,
onClick
}: {
selected?: boolean;
commandBinding?: CommandBinding<any>;
onClick?: () => void;
}) {
const scrollRef = useScrollOnSelected(selected);
if (!commandBinding) {
return null;
}
return (
<ToolTipCover asChild content={commandBinding.metadata.description}>
<DialogClose asChild aria-label={commandBinding.metadata.name}>
<Button
ref={scrollRef}
aria-label={commandBinding.metadata.name}
onClick={() => {
commandBinding.run();
onClick?.();
console.log(commandBinding.metadata.name);
}}
className={`flex items-center w-full h-full p-1 pt-1.5 rounded-md cursor-pointer transition-colors shadow-none ${selected ? "bg-muted": "bg-background"} hover:bg-muted`}
style={{ color: "hsl(var(--foreground))" }}
>
<div className="flex flex-col flex-1">
<div className="flex items-center">
<span className="flex items-center justify-center mr-4">
{commandBinding.metadata.icon}
</span>
<span className="text-sm font-light">
{commandBinding.metadata.name}
</span>
</div>
</div>
<KeyboardShortcuts shortcuts={commandBinding.metadata.shortcuts} />
</Button>
</DialogClose>
</ToolTipCover>
);
} |