Search Bar Suggestions

1"use client";
2 
3import * as React from "react";
4import { Button } from "@/components/ui/button";
5import {
6  Command,
7  CommandGroup,
8  CommandInput,
9  CommandItem,
10  CommandList,
11} from "@/components/ui/command";
12 
13import { useQueryState, parseAsString } from "nuqs";
14import { Loader2Icon, XIcon } from "lucide-react";
15 
16import { useDebounce } from "@/hooks/use-debounce";
17import { cn } from "@/lib/utils";
18 
19// Code at https://github.com/R4ULtv/ui/tree/master/server/search-frameworks.tsx
20import { searchFrameworks, Framework } from "@/server/search-frameworks";
21 
22export default function SearchBarSuggestions() {
23  const [query, setQuery] = useQueryState("framework", parseAsString);
24  const [inputValue, setInputValue] = React.useState(query || "");
25  const debouncedInput = useDebounce(inputValue, 200);
26 
27  const [suggestions, setSuggestions] = React.useState<Framework[]>([]);
28  const [isLoading, setIsLoading] = React.useState(false);
29 
30  const clearQuery = React.useCallback(() => {
31    setInputValue("");
32    setQuery(null);
33    setSuggestions([]);
34  }, [setQuery]);
35 
36  const handleInputChange = React.useCallback((value: string) => {
37    setInputValue(value);
38  }, []);
39 
40  const handleSelect = React.useCallback(
41    (value: string) => {
42      setQuery(value);
43      setInputValue(value);
44    },
45    [setQuery],
46  );
47 
48  React.useEffect(() => {
49    if (!debouncedInput || debouncedInput.length < 2) {
50      setSuggestions([]);
51      setIsLoading(false);
52      return;
53    }
54    const getSuggestions = async () => {
55      if (debouncedInput && debouncedInput.length > 0) {
56        setIsLoading(true);
57        const data = await searchFrameworks(debouncedInput);
58        setSuggestions(data);
59        setIsLoading(false);
60      } else {
61        setSuggestions([]);
62        setIsLoading(false);
63      }
64    };
65    getSuggestions();
66  }, [debouncedInput]);
67 
68  return (
69    <Command
70      shouldFilter={false}
71      className="w-full max-w-[322px] bg-input/30 border p-0 rounded-md!"
72    >
73      <div
74        className={cn(
75          "relative [&_div[data-slot='command-input-wrapper']]:h-10 [&_[data-slot=input-group]]:!border-0 [&_[data-slot=input-group]]:!shadow-none [&_[data-slot=input-group]]:!bg-transparent",
76          suggestions.length > 0
77            ? "[&_div[data-slot='command-input-wrapper']]:border-b"
78            : "[&_div[data-slot='command-input-wrapper']]:border-0",
79        )}
80      >
81        <CommandInput
82          className="peer pe-9"
83// … truncated