Movie_Search/movie-search/src/app/Search/SearchBar.tsx
2024-06-02 01:21:21 -04:00

34 lines
983 B
TypeScript

import { primaryBtn, secondaryBtn } from "@/common/classes";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
export default function SearchBar() {
const searchMovies = async (formData: FormData) => {
"use server";
const movieTitle = formData.get("movieTitle");
// revalidatePath('/Search')
redirect(`/Search?s=${movieTitle}`);
};
return (
<form action={searchMovies} className={`md:flex gap-4 m-4 justify-center`}>
<div className="flex justify-center">
<input
data-testid="SearchBar-input"
className="rounded px-2 mb-2 md:mb-0"
placeholder="Search by Title"
name="movieTitle"
/>
</div>
<div className="flex gap-4 justify-center">
<button type="submit" className={primaryBtn}>
Search
</button>
<button type="reset" className={secondaryBtn}>
Clear
</button>
</div>
</form>
);
}