Code Generation Chat with Syntax Highlighting

import { useEffect, useState } from "react";

export function useDebounceSearch(value: string, delay = 300) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  const [isDebouncing, setIsDebouncing] = useState(false);

  useEffect(() => {
    setIsDebouncing(true);

    const timer = setTimeout(() => {
      setDebouncedValue(value);
      setIsDebouncing(false);
    }, delay);

    return () => clearTimeout(timer);
  }, [value, delay]);

  return { debouncedValue, isDebouncing };
}

import { useState } from "react";
import { useDebounceSearch } from "./use-debounce-search";

export function SearchInput() {
  const [query, setQuery] = useState("");
  const { debouncedValue, isDebouncing } = useDebounceSearch(query);

  useEffect(() => {
    if (!debouncedValue) return;
    fetch("/api/search?q=" + debouncedValue)
      .then((res) => res.json())
      .then(setResults);
  }, [debouncedValue]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      {isDebouncing && <span>Searching...</span>}
    </div>
  );
}