search-input.tsx raw

   1  "use client";
   2  
   3  import { CommandIcon, SearchIcon } from "lucide-react";
   4  import React from "react";
   5  import { Badge } from "src/components/ui/badge";
   6  
   7  import { Input } from "src/components/ui/input";
   8  import { useCommandPaletteContext } from "src/contexts/CommandPaletteContext";
   9  import { cn } from "src/lib/utils";
  10  
  11  interface SearchInputProps {
  12    placeholder?: string;
  13    className?: string;
  14  }
  15  
  16  export function SearchInput({
  17    placeholder = "Search pages, apps, etc...",
  18    className,
  19  }: SearchInputProps) {
  20    const { setOpen } = useCommandPaletteContext();
  21  
  22    const handleClick = React.useCallback(() => {
  23      setOpen(true);
  24    }, [setOpen]);
  25  
  26    const handleKeyDown = React.useCallback(
  27      (e: React.KeyboardEvent<HTMLInputElement>) => {
  28        if (e.key === "Enter" || e.key === " ") {
  29          e.preventDefault();
  30          setOpen(true);
  31        }
  32      },
  33      [setOpen]
  34    );
  35  
  36    return (
  37      <div
  38        className={cn("relative cursor-pointer", className)}
  39        onClick={handleClick}
  40      >
  41        <Input
  42          placeholder={placeholder}
  43          readOnly
  44          className="cursor-pointer pl-8 pr-8 max-sm:w-32"
  45          onKeyDown={handleKeyDown}
  46          tabIndex={0}
  47        />
  48        <SearchIcon className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
  49        <Badge
  50          variant="secondary"
  51          className="absolute right-2 top-1/2 transform -translate-y-1/2 max-sm:hidden"
  52        >
  53          <CommandIcon />K
  54        </Badge>
  55      </div>
  56    );
  57  }
  58