feat: implement search functionality with results display, add search input component, and update API for search results
This commit is contained in:
29
thoughts-frontend/components/search-input.tsx
Normal file
29
thoughts-frontend/components/search-input.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Input } from "./ui/input";
|
||||
import { Search as SearchIcon } from "lucide-react";
|
||||
|
||||
export function SearchInput() {
|
||||
const router = useRouter();
|
||||
|
||||
const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const query = formData.get("q") as string;
|
||||
if (query) {
|
||||
router.push(`/search?q=${encodeURIComponent(query)}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSearch} className="relative w-full max-w-sm">
|
||||
<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
name="q"
|
||||
placeholder="Search for users or thoughts..."
|
||||
className="pl-9 md:min-w-[250px]"
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user