Frontend Web Development

import { useState, useTransition } from "react";
import { Search, Sparkles } from "lucide-react";

export default function CourseSearch() {
  const [query, setQuery] = useState("");
  const [isPending, startTransition] = useTransition();

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    startTransition(() => {
      setQuery(e.target.value);
    });
  };

  return (
    <div className="relative w-full max-w-md">
      <Search className="absolute left-3.5 top-3 h-4 w-4 text-gray-400" />
      <input
        type="text"
        placeholder="Search courses..."
        onChange={handleSearch}
        className="w-full rounded-xl border border-gray-200 py-2.5 pl-10 pr-4 text-sm focus:border-brand-500 focus:outline-none"
      />
      {isPending && <Sparkles className="absolute right-3 top-3 h-4 w-4 animate-spin text-brand-500" />}
    </div>
  );
}