Skip to content

Commit 8caa11b

Browse files
ericallamericallam
committed
Start of the Command Palette using radix-ui Dialog
1 parent 904b64d commit 8caa11b

File tree

4 files changed

+161
-15
lines changed

4 files changed

+161
-15
lines changed

‎app/components/SearchBar.tsx‎

Lines changed: 36 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,48 @@
11
import { SearchIcon } from "@heroicons/react/outline";
22
import { ShortcutIcon } from "./Icons/ShortcutIcon";
33
import { Body } from "./Primitives/Body";
4+
import { Dialog, DialogTrigger, DialogContent } from "./UI/Dialog";
45

56
export type SearchBarProps = {
67
className?: string;
78
};
89

10+
import classnames from "~/utilities/classnames";
11+
912
export function SearchBar({ className }: SearchBarProps) {
1013
return (
11-
<div className="flex justify-between items-center group w-44 rounded-sm bg-slate-300 transition hover:bg-slate-400 hover:bg-opacity-50 dark:bg-slate-800 dark:text-slate-400 hover:cursor-pointer hover:dark:bg-slate-700 hover:dark:bg-opacity-70">
12-
<div className="flex items-center pl-2">
13-
<SearchIcon className="w-4 h-4 mr-1" />
14-
<Body>Search…</Body>
15-
</div>
16-
<div className="flex items-center gap-1 pr-2">
17-
<ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
18-
⌘
19-
</ShortcutIcon>
20-
<ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
21-
K
22-
</ShortcutIcon>
23-
</div>
24-
</div>
14+
<Dialog>
15+
<DialogTrigger>
16+
<div className="flex justify-between items-center group w-44 rounded-sm bg-slate-300 transition hover:bg-slate-400 hover:bg-opacity-50 dark:bg-slate-800 dark:text-slate-400 hover:cursor-pointer hover:dark:bg-slate-700 hover:dark:bg-opacity-70">
17+
<div className="flex items-center pl-2">
18+
<SearchIcon className="w-4 h-4 mr-1" />
19+
<Body>Search…</Body>
20+
</div>
21+
<div className="flex items-center gap-1 pr-2">
22+
<ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
23+
⌘
24+
</ShortcutIcon>
25+
<ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
26+
K
27+
</ShortcutIcon>
28+
</div>
29+
</div>
30+
</DialogTrigger>
31+
<DialogContent
32+
className={classnames(
33+
"fixed z-50",
34+
"w-[95vw] max-w-md rounded-lg p-4 md:w-full",
35+
"top-[30%] left-[50%] -translate-x-[50%] -translate-y-[50%]",
36+
"bg-white dark:bg-gray-800",
37+
"focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
38+
)}
39+
>
40+
<SearchCommandPalette />
41+
</DialogContent>
42+
</Dialog>
2543
);
2644
}
45+
46+
export default function SearchCommandPalette() {
47+
return <div className="text-center">Search Command Palette</div>;
48+
}

‎app/components/UI/Dialog.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import * as DialogPrimitive from "@radix-ui/react-dialog";
2+
import React, { ComponentPropsWithoutRef } from "react";
3+
4+
export const DialogContent = React.forwardRef<
5+
React.ElementRef<typeof DialogPrimitive.Content>,
6+
ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
7+
>(({ children, ...props }, forwardedRef) => (
8+
<DialogPrimitive.Portal>
9+
<DialogPrimitive.Overlay
10+
forceMount
11+
className="fixed inset-0 z-20 bg-black/50"
12+
/>
13+
<DialogPrimitive.Content forceMount {...props} ref={forwardedRef}>
14+
{children}
15+
</DialogPrimitive.Content>
16+
</DialogPrimitive.Portal>
17+
));
18+
19+
export const Dialog = DialogPrimitive.Root;
20+
export const DialogTrigger = DialogPrimitive.Trigger;

‎package-lock.json‎

Lines changed: 103 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"@jsonhero/json-schema-fns": "^0.0.1",
3434
"@jsonhero/path": "^1.0.17",
3535
"@jsonhero/schema-infer": "^0.1.x",
36+
"@radix-ui/react-dialog": "^0.1.7",
3637
"@radix-ui/react-popover": "^0.1.5",
3738
"@radix-ui/react-tabs": "^0.1.5",
3839
"@remix-run/cloudflare-workers": "^1.2.3",
@@ -99,4 +100,4 @@
99100
},
100101
"sideEffects": false,
101102
"main": "dist/worker.js"
102-
}
103+
}

0 commit comments

Comments
 (0)