gitscope
/
← marzneshin / dashboard/src/features/search-command/command-box.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/search-command/command-box.tsx · v0.3.0
Source
1 3d1a4b1 Mrdn 2y ago import {
2 3d1a4b1 Mrdn 2y ago UsersIcon,
3 3d1a4b1 Mrdn 2y ago ServerIcon,
4 3d1a4b1 Mrdn 2y ago BoxIcon,
5 3d1a4b1 Mrdn 2y ago ServerCogIcon,
6 3d1a4b1 Mrdn 2y ago SettingsIcon,
7 3d1a4b1 Mrdn 2y ago } from "lucide-react";
8 3d1a4b1 Mrdn 2y ago import { useState, useEffect } from "react";
9 3d1a4b1 Mrdn 2y ago import { useTranslation } from "react-i18next";
10 3d1a4b1 Mrdn 2y ago import {
11 3d1a4b1 Mrdn 2y ago CommandDialog,
12 3d1a4b1 Mrdn 2y ago CommandEmpty,
13 3d1a4b1 Mrdn 2y ago CommandGroup,
14 3d1a4b1 Mrdn 2y ago CommandInput,
15 3d1a4b1 Mrdn 2y ago CommandItem,
16 3d1a4b1 Mrdn 2y ago CommandList,
17 3d1a4b1 Mrdn 2y ago CommandSeparator,
18 3d1a4b1 Mrdn 2y ago } from "@marzneshin/components";
19 3d1a4b1 Mrdn 2y ago import { useNavigate } from "@tanstack/react-router";
20 3d1a4b1 Mrdn 2y ago import { SearchBox } from "./search-box";
21 3d1a4b1 Mrdn 2y ago
22 3d1a4b1 Mrdn 2y ago export function CommandBox() {
23 3d1a4b1 Mrdn 2y ago const [open, setOpen] = useState(false);
24 3d1a4b1 Mrdn 2y ago const { t } = useTranslation();
25 3d1a4b1 Mrdn 2y ago const navigate = useNavigate();
26 3d1a4b1 Mrdn 2y ago
27 3d1a4b1 Mrdn 2y ago useEffect(() => {
28 3d1a4b1 Mrdn 2y ago const down = (e: KeyboardEvent) => {
29 3d1a4b1 Mrdn 2y ago if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
30 3d1a4b1 Mrdn 2y ago e.preventDefault();
31 3d1a4b1 Mrdn 2y ago setOpen((open) => !open);
32 3d1a4b1 Mrdn 2y ago }
33 3d1a4b1 Mrdn 2y ago };
34 3d1a4b1 Mrdn 2y ago document.addEventListener("keydown", down);
35 3d1a4b1 Mrdn 2y ago return () => document.removeEventListener("keydown", down);
36 3d1a4b1 Mrdn 2y ago }, []);
37 3d1a4b1 Mrdn 2y ago
38 3d1a4b1 Mrdn 2y ago return (
39 3d1a4b1 Mrdn 2y ago <>
40 3d1a4b1 Mrdn 2y ago <SearchBox onClick={() => setOpen(true)} />
41 3d1a4b1 Mrdn 2y ago <CommandDialog open={open} onOpenChange={setOpen}>
42 3d1a4b1 Mrdn 2y ago <CommandInput
43 3d1a4b1 Mrdn 2y ago placeholder="Type a command or search..."
44 3d1a4b1 Mrdn 2y ago className="focus:ring-0 ring-0 m-1 border-none"
45 3d1a4b1 Mrdn 2y ago />
46 3d1a4b1 Mrdn 2y ago <CommandList>
47 3d1a4b1 Mrdn 2y ago <CommandEmpty>No results found.</CommandEmpty>
48 3d1a4b1 Mrdn 2y ago <CommandGroup heading="Pages">
49 3d1a4b1 Mrdn 2y ago <CommandItem
50 3d1a4b1 Mrdn 2y ago onSelect={() => {
51 3d1a4b1 Mrdn 2y ago navigate({ to: "/users" });
52 3d1a4b1 Mrdn 2y ago setOpen(false);
53 3d1a4b1 Mrdn 2y ago }}
54 3d1a4b1 Mrdn 2y ago >
55 3d1a4b1 Mrdn 2y ago <UsersIcon className="mr-2 size-4" />
56 3d1a4b1 Mrdn 2y ago <span>{t("users")}</span>
57 3d1a4b1 Mrdn 2y ago </CommandItem>
58 3d1a4b1 Mrdn 2y ago <CommandItem
59 3d1a4b1 Mrdn 2y ago onSelect={() => {
60 3d1a4b1 Mrdn 2y ago navigate({ to: "/services" });
61 3d1a4b1 Mrdn 2y ago setOpen(false);
62 3d1a4b1 Mrdn 2y ago }}
63 3d1a4b1 Mrdn 2y ago >
64 3d1a4b1 Mrdn 2y ago <ServerIcon className="mr-2 size-4" />
65 3d1a4b1 Mrdn 2y ago <span>{t("services")}</span>
66 3d1a4b1 Mrdn 2y ago </CommandItem>
67 3d1a4b1 Mrdn 2y ago <CommandItem
68 3d1a4b1 Mrdn 2y ago onSelect={() => {
69 3d1a4b1 Mrdn 2y ago navigate({ to: "/nodes" });
70 3d1a4b1 Mrdn 2y ago setOpen(false);
71 3d1a4b1 Mrdn 2y ago }}
72 3d1a4b1 Mrdn 2y ago >
73 3d1a4b1 Mrdn 2y ago <BoxIcon className="mr-2 h-4 w-4" />
74 3d1a4b1 Mrdn 2y ago <span>{t("nodes")}</span>
75 3d1a4b1 Mrdn 2y ago </CommandItem>
76 3d1a4b1 Mrdn 2y ago <CommandItem
77 3d1a4b1 Mrdn 2y ago onSelect={() => {
78 3d1a4b1 Mrdn 2y ago navigate({ to: "/hosts" });
79 3d1a4b1 Mrdn 2y ago setOpen(false);
80 3d1a4b1 Mrdn 2y ago }}
81 3d1a4b1 Mrdn 2y ago >
82 3d1a4b1 Mrdn 2y ago <ServerCogIcon className="mr-2 h-4 w-4" />
83 3d1a4b1 Mrdn 2y ago <span>{t("hosts")}</span>
84 3d1a4b1 Mrdn 2y ago </CommandItem>
85 3d1a4b1 Mrdn 2y ago </CommandGroup>
86 3d1a4b1 Mrdn 2y ago <CommandSeparator />
87 3d1a4b1 Mrdn 2y ago <CommandGroup heading="Settings">
88 3d1a4b1 Mrdn 2y ago <CommandItem
89 3d1a4b1 Mrdn 2y ago onSelect={() => {
90 3d1a4b1 Mrdn 2y ago navigate({ to: "/settings" });
91 3d1a4b1 Mrdn 2y ago setOpen(false);
92 3d1a4b1 Mrdn 2y ago }}
93 3d1a4b1 Mrdn 2y ago >
94 3d1a4b1 Mrdn 2y ago <SettingsIcon className="mr-2 h-4 w-4" />
95 3d1a4b1 Mrdn 2y ago <span>{t("settings")}</span>
96 3d1a4b1 Mrdn 2y ago </CommandItem>
97 3d1a4b1 Mrdn 2y ago </CommandGroup>
98 3d1a4b1 Mrdn 2y ago </CommandList>
99 3d1a4b1 Mrdn 2y ago </CommandDialog>
100 3d1a4b1 Mrdn 2y ago </>
101 3d1a4b1 Mrdn 2y ago );
102 3d1a4b1 Mrdn 2y ago }