Add a keybind for the docs search dialog
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m3s
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m3s
This commit is contained in:
parent
280df436d2
commit
c469b2d5cf
@ -24,7 +24,7 @@ const DocumentationLayout = ({
|
|||||||
"/"
|
"/"
|
||||||
); // The active slug of this page
|
); // The active slug of this page
|
||||||
return (
|
return (
|
||||||
<section className="min-h-screen py-28 flex justify-center">
|
<section className="min-h-screen py-32 pb-52 flex justify-center">
|
||||||
<div className="flex flex-wrap gap-32 divide-x-2">
|
<div className="flex flex-wrap gap-32 divide-x-2">
|
||||||
<Sidebar activeSlug={activeSlug} />
|
<Sidebar activeSlug={activeSlug} />
|
||||||
{children}
|
{children}
|
||||||
|
@ -38,6 +38,18 @@ const QuickSearchDialog = (): ReactElement => {
|
|||||||
}
|
}
|
||||||
}, [results]);
|
}, [results]);
|
||||||
|
|
||||||
|
// Listen for CTRL + K keybinds to open this dialog
|
||||||
|
useEffect(() => {
|
||||||
|
const handleKeyDown = (event: KeyboardEvent): void => {
|
||||||
|
if ((event.ctrlKey || event.metaKey) && event.key === "k") {
|
||||||
|
event.preventDefault();
|
||||||
|
setOpen((open: boolean) => !open);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener("keydown", handleKeyDown);
|
||||||
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||||
|
}, []);
|
||||||
|
|
||||||
// Render the contents
|
// Render the contents
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -52,12 +64,18 @@ const QuickSearchDialog = (): ReactElement => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
className="pl-10"
|
className="pl-10 cursor-pointer"
|
||||||
type="search"
|
type="search"
|
||||||
name="search"
|
name="search"
|
||||||
placeholder="Quick search..."
|
placeholder="Quick search..."
|
||||||
readOnly
|
readOnly
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<div className="absolute top-1.5 right-3">
|
||||||
|
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
|
||||||
|
<span className="text-xs">⌘</span>K
|
||||||
|
</kbd>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Dialog */}
|
{/* Dialog */}
|
||||||
|
Loading…
Reference in New Issue
Block a user