Search Command Dialog

1"use client";
2
3import * as React from "react";
4
5import { ArrowUpRightIcon, CircleFadingPlusIcon, FileInputIcon, FolderPlusIcon, SearchIcon } from "lucide-react";
6
7import {
8  ResponsiveCommandDialog,
9  ResponsiveCommandEmpty,
10  ResponsiveCommandGroup,
11  ResponsiveCommandInput,
12  ResponsiveCommandItem,
13  ResponsiveCommandList,
14  ResponsiveCommandSeparator,
15  ResponsiveCommandShortcut,
16} from "@/components/ui/responsive-command";
17
18export default function SearchCommandExample() {
19  const [open, setOpen] = React.useState(false);
20
21  React.useEffect(() => {
22    const down = (e: KeyboardEvent) => {
23      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
24        e.preventDefault();
25        setOpen((open) => !open);
26      }
27    };
28
29    document.addEventListener("keydown", down);
30    return () => document.removeEventListener("keydown", down);
31  }, []);
32
33  return (
34    <>
35      <button
36        className="shadow-xs inline-flex h-9 w-fit rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground outline-none transition-[color,box-shadow] placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
37        onClick={() => setOpen(true)}
38      >
39        <span className="flex grow items-center">
40          <SearchIcon className="-ms-1 me-3 text-muted-foreground/80" size={16} aria-hidden="true" />
41          <span className="font-normal text-muted-foreground/70">Search</span>
42        </span>
43        <kbd className="not-prose -me-1 ms-12 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70">
44          ⌘K
45        </kbd>
46      </button>
47      <ResponsiveCommandDialog open={open} onOpenChange={setOpen}>
48        <ResponsiveCommandInput placeholder="Type a command or search..." />
49        <ResponsiveCommandList>
50          <ResponsiveCommandEmpty>No results found.</ResponsiveCommandEmpty>
51          <ResponsiveCommandGroup heading="Quick start">
52            <ResponsiveCommandItem>
53              <FolderPlusIcon size={16} className="opacity-60" aria-hidden="true" />
54              <span>New folder</span>
55              <ResponsiveCommandShortcut className="justify-center">⌘N</ResponsiveCommandShortcut>
56            </ResponsiveCommandItem>
57            <ResponsiveCommandItem>
58              <FileInputIcon size={16} className="opacity-60" aria-hidden="true" />
59// … truncated