27 | );
28 | };
29 |
30 | export default Hero;
31 |
--------------------------------------------------------------------------------
/utils/config.ts:
--------------------------------------------------------------------------------
1 | // Configuration for TMDB API
2 | // Read more about the API here: https://developers.themoviedb.org/
3 |
4 | export const API_URL: string = 'https://api.themoviedb.org/3/';
5 | export const API_KEY: string | undefined = process.env.API_KEY;
6 |
7 | export const SEARCH_BASE_URL: string = `${API_URL}search/movie?api_key=${API_KEY}&language=en-US&query=`;
8 | export const POPULAR_BASE_URL: string = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US`;
9 | // For single movie
10 | export const movieUrl = (id?: string) => `${API_URL}movie/${id}?api_key=${API_KEY}`;
11 | export const creditsUrl = (id?: string) => `${API_URL}movie/${id}/credits?api_key=${API_KEY}`;
12 |
13 | export const IMAGE_BASE_URL: string = 'http://image.tmdb.org/t/p/';
14 | // Sizes: w300, w780, w1280, original
15 | export const BACKDROP_SIZE: string = 'w1280';
16 | // w92, w154, w185, w342, w500, w780, original
17 | export const POSTER_SIZE: string = 'w780';
18 |
19 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Zai Santillan
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/components/SearchInput.tsx:
--------------------------------------------------------------------------------
1 | import { ChangeEvent, Dispatch, SetStateAction, useRef, useState } from 'react';
2 | import Image from 'next/image';
3 |
4 | type Props = {
5 | setQuery: Dispatch>;
6 | };
7 |
8 | const SearchInput = ({ setQuery }: Props) => {
9 | const [text, setText] = useState('');
10 | const timer = useRef();
11 |
12 | const handleInput = (e: ChangeEvent) => {
13 | const value = e.currentTarget.value;
14 | clearTimeout(timer.current);
15 | setText(value);
16 | timer.current = setTimeout(() => {
17 | setQuery(value);
18 | }, 300);
19 | };
20 |
21 | return (
22 | <>
23 |
30 |