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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 | 33x 2159x 2159x 2159x 2159x 2159x 8x 8x 2159x 62x 62x 62x 2159x 36x 162x 4x 4x 4x 4x 36x 36x 4x 2159x 33x 33x 33x 31x 6477x 144x 91x 579x | import { Shortcut } from "@/ahuora-design-system/ui/shortcut";
import {
CommandBinding,
GroupedResult,
useCommandSearch,
} from "just-search-it";
import { Search } from "lucide-react";
import React, { useState } from "react";
import { Button } from "../ahuora-design-system/ui/button";
import {
Dialog,
DialogContent,
DialogTitle,
DialogTrigger,
} from "../ahuora-design-system/ui/dialog";
import { CommandButton } from "./CommandButton";
import { ScrollArea, ScrollBar } from "../ahuora-design-system/ui/scroll-area";
import { Input } from "../ahuora-design-system/ui/input";
import { CommandBrowser } from "./CommandBrowser";
import { DialogDescription } from "@radix-ui/react-dialog";
// grid grid-cols-10
const ColumnWidths = ["w-[33%]", "w-[33%]", "w-[33%]"];
export function CommandPalette() {
const [open, setOpen] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const numColumns = 3;
const [hasSearched, setHasSearched] = useState(false);
const [inputRef, featured, commands, selected] = useCommandSearch(
numColumns,
searchTerm,
open,
(command) => {
setOpen(false);
setSearchTerm("");
},
);
const onOpenChange = (isOpen: boolean) => {
setOpen(isOpen);
setHasSearched(true);
setSearchTerm("");
};
// TODO; useKeypress hook
React.useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "/" || (event.key === "k" && event.ctrlKey)) {
event.preventDefault();
setOpen(true);
setSearchTerm("");
return;
}
};
window.addEventListener("keydown", handleKeyDown);
return () => {
window.removeEventListener("keydown", handleKeyDown);
};
}, []);
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTrigger
onClick={() => {
setOpen(!open);
setSearchTerm("");
}}
asChild
>
<Button
variant="outline"
className={
"w-full flex justify-between align-middle p-2 rounded-xl border-2 border-primary " +
(!hasSearched ? "animate-[pulse_3_infinite]" : "")
}
onClick={() => {
setOpen(true);
}}
aria-label="Open Command Palette"
>
<div className="flex gap-1 align-middle">
{" "}
<Search size={14} />
<span className="text-xs">What do you want to do? ...</span>
</div>
<div className="ml-auto flex gap-1">
<Shortcut>Ctrl</Shortcut>
<Shortcut>K</Shortcut>
</div>
</Button>
</DialogTrigger>
<DialogContent className="w-[80vw]">
<Input
ref={inputRef}
value={searchTerm}
aria-label="Command Palette Input"
placeholder="Type a command or search..."
onChange={(e) => {
setSearchTerm(e.target.value);
}}
></Input>
<ScrollArea className="h-[80vh] w-full">
<DialogTitle className="hidden">Search Dialog</DialogTitle>
<DialogDescription className="hidden">
Search for commands
</DialogDescription>
{searchTerm.length == 0 && <CommandBrowser />}
<div>
<Column items={featured} selected={selected} />
</div>
<div className="flex flex-row w-full gap-2">
{ColumnWidths.map((colClass, index) =>
commands[index].length == 0 ? null : (
<div key={index} className={`${colClass}`}>
<Column items={commands[index]} selected={selected} />
</div>
),
)}
</div>
<ScrollBar orientation="vertical"></ScrollBar>
</ScrollArea>
</DialogContent>
</Dialog>
);
}
function Column({
items,
selected,
}: {
items: GroupedResult;
selected?: CommandBinding<any>;
}) {
return (
<>
{items.map(([group, items]) => (
<div key={group} className="mb-4 flex flex-col border rounded-md">
<h2 className="text-l text-center strong">{group}</h2>
{items.map((item) => (
<CommandButton
key={item.item.key}
selected={item.item.command === selected}
commandBinding={item.item.command}
/>
))}
</div>
))}
</>
);
}
|