Search Bar

1"use client";
2 
3import * as React from "react";
4 
5import { Input } from "@/components/ui/input";
6import { Button } from "@/components/ui/button";
7import { useDebounce } from "@/hooks/use-debounce";
8 
9import { useQueryState, parseAsString } from "nuqs";
10import { SearchIcon, XIcon } from "lucide-react";
11 
12export default function SearchBar() {
13  const [query, setQuery] = useQueryState("search", parseAsString);
14  const [inputValue, setInputValue] = React.useState(query || "");
15  const debouncedInput = useDebounce(inputValue, 300);
16 
17  React.useEffect(() => {
18    if (debouncedInput.trim() === "") {
19      if (query !== null) setQuery(null);
20    } else if (debouncedInput !== query) {
21      setQuery(debouncedInput);
22    }
23  }, [debouncedInput, query, setQuery]);
24 
25  const clearQuery = React.useCallback(() => {
26    setInputValue("");
27    setQuery(null);
28  }, [setQuery]);
29 
30  const handleInputChange = React.useCallback(
31    (event: React.ChangeEvent<HTMLInputElement>) => {
32      setInputValue(event.target.value);
33    },
34    [],
35  );
36 
37  return (
38    <form
39      className="relative w-full max-w-xs"
40      role="search"
41      aria-label="Site search"
42    >
43      <Input
44        className="peer ps-9 pe-9 h-10 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none"
45        placeholder="Search..."
46        type="search"
47        value={inputValue}
48        onChange={handleInputChange}
49        autoComplete="off"
50        aria-label="Search input"
51      />
52      <div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 peer-disabled:opacity-50">
53        <SearchIcon aria-hidden="true" className="size-4" />
54      </div>
55      {inputValue && (
56        <Button
57          type="button"
58          variant="ghost"
59          size="icon"
60          onClick={clearQuery}
61          aria-label="Clear search"
62          className="text-muted-foreground hover:text-foreground hover:bg-transparent dark:hover:bg-transparent absolute inset-y-0 end-0 h-full w-10 transition-colors"
63        >
64          <XIcon aria-hidden="true" className="animate-in fade-in zoom-in-95" />
65        </Button>
66      )}
67    </form>
68  );
69}