mirror of https://github.com/jetkvm/kvm.git
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { useEffect } from "react";
|
|
import { LuCommand } from "react-icons/lu";
|
|
|
|
import { Button } from "@components/Button";
|
|
import Container from "@components/Container";
|
|
import { useMacrosStore } from "@/hooks/stores";
|
|
import useKeyboard from "@/hooks/useKeyboard";
|
|
import { useJsonRpc } from "@/hooks/useJsonRpc";
|
|
|
|
export default function MacroBar() {
|
|
const { macros, initialized, loadMacros, setSendFn } = useMacrosStore();
|
|
const { executeMacro } = useKeyboard();
|
|
const [send] = useJsonRpc();
|
|
|
|
useEffect(() => {
|
|
setSendFn(send);
|
|
|
|
if (!initialized) {
|
|
loadMacros();
|
|
}
|
|
}, [initialized, loadMacros, setSendFn, send]);
|
|
|
|
if (macros.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Container className="bg-white dark:bg-slate-900 border-b border-b-slate-800/20 dark:border-b-slate-300/20">
|
|
<div className="flex items-center gap-x-2 py-1.5">
|
|
<div className="absolute -ml-5">
|
|
<LuCommand className="h-4 w-4 text-slate-500" />
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{macros.map(macro => (
|
|
<Button
|
|
key={macro.id}
|
|
aria-label={macro.name}
|
|
size="XS"
|
|
theme="light"
|
|
text={macro.name}
|
|
onClick={() => executeMacro(macro.steps)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
);
|
|
}
|