aboutsummaryrefslogtreecommitdiff
path: root/src/app/movies/components/search_2.jsx
blob: cf3fc691b16c4de00230d019aa0f1bd0d0f4dd0d (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
55
56
57
58
59
60
61
62
63
"use server";

import { SEARCH } from "../../../../utils/movie_urls";
import PreFetchMovieInfo from "./cacher";
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);
	PreFetchMovieInfo(data);
	if (data.results.length > 0) {
		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",
									}}
									className={styles.MovieResultsPrev}
								>
									<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>
		);
	} else {
		return <p className={styles.NoResults}>No results found!</p>;
	}
};

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;