1import { useState, useEffect } from "react";
 2import {
 3    CommandDialog,
 4    CommandEmpty,
 5    CommandInput,
 6    CommandList,
 7    ScrollArea,
 8} from "@marzneshin/common/components";
 9import { SearchBox } from "./search-box";
10import { useAuth } from "@marzneshin/modules/auth";
11import { CommandItems } from "./command-items";
12import { commandItems } from "./commands";
13
14export function CommandBox() {
15    const [open, setOpen] = useState(false);
16    const { isSudo } = useAuth();
17
18    useEffect(() => {
19        const down = (e: KeyboardEvent) => {
20            if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
21                e.preventDefault();
22                setOpen((open) => !open);
23            }
24        };
25        document.addEventListener("keydown", down);
26        return () => document.removeEventListener("keydown", down);
27    }, []);
28
29    return (
30        <>
31            <SearchBox onClick={() => setOpen(true)} />
32            <CommandDialog open={open} onOpenChange={setOpen}>
33                <CommandInput
34                    placeholder="Type a command or search..."
35                    className="focus:ring-0 ring-0 m-1 border-none"
36                />
37                <ScrollArea className="max-h-100">
38                    <CommandList>
39                        <CommandEmpty>No results found.</CommandEmpty>
40                        <CommandItems items={commandItems} isSudo={isSudo} setOpen={setOpen} />
41                    </CommandList>
42                </ScrollArea>
43            </CommandDialog>
44        </>
45    );
46}
47
48