aboutsummaryrefslogtreecommitdiff
path: root/src/app/movies/components/search_2.jsx
blob: 1c2ff8840fbcc2a6f91474e0875566d1032cffc2 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
"use server";

import { SEARCH } from "../../../../utils/movie_urls";
import Image from "next/image";
import Link from "next/link";
import styles from "../styles/search.module.css";

const SearchResults = async (title) => {
	const data = await get_search_results(title);
	return (
		<div className={styles.MovieSearchResultsContainer}>
			{data &&
				data.results &&
				data.results.map((item, index) => {
					if (item.poster_path) {
						return (
							<Link
								href={`/movies/${item.id}`}
								key={index}
								style={{
									backgroundImage: `url(https://image.tmdb.org/t/p/original${item.backdrop_path})`,
									backgroundRepeat: "no-repeat",
									backgroundSize: "cover",
									textDecoration: "none",
									color: "white",
									borderRadius: "0.5rem",
									overflow: "hidden",
								}}
							>
								<section className={styles.MovieEntry}>
									<p>{item.title || item.original_title}</p>
									<Image
										src={`https://image.tmdb.org/t/p/original${item.poster_path}`}
										width={130}
										height={230}
										alt="Movie Poster"
										priority
									/>
								</section>
							</Link>
						);
					}
				})}
		</div>
	);
};

const get_search_results = async (title) => {
	const res = await fetch(SEARCH + title, { next: { revalidate: 21600 } });
	const data = await res.json();
	return data;
};

export default SearchResults;