HandleChange()} className="w-full h-full left-0 top-0 bg-black/50 fixed" />
37 |
38 |
47 | HandleChange()} style={{ zIndex: '2' }} className="flex left-0 top-0 justify-center items-center h-screen w-screen fixed text-black">
48 |
49 |
50 |
HandleChange()} className="absolute right-5 top-5 w-8 h-8 flex justify-center items-center rounded-lg transition-all duration-200 cursor-pointer hover:bg-zinc-500/20">
51 |
55 |
56 |
57 |
65 |
66 |
67 |
69 |
70 |
71 | }
--------------------------------------------------------------------------------
/src/pages/actors/[id].jsx:
--------------------------------------------------------------------------------
1 | import { AiFillStar } from "react-icons/ai"
2 | import { BsFillPlayFill } from "react-icons/bs"
3 | import WatchTrailer from "../../components/Global/WatchTrailer";
4 | import CardGroup from "../../components/Static/CardGroup";
5 | import Router from 'next/router'
6 | import { NextSeo } from 'next-seo';
7 |
8 | function Movie({ data, movies }) {
9 | const backdropImage = data?.credits?.cast?.[0]?.backdrop_path ? ("https://image.tmdb.org/t/p/original" + data?.credits?.cast?.[0]?.backdrop_path) : '/no-image.svg';
10 | const verticalImage = data?.profile_path ? ("https://image.tmdb.org/t/p/w500" + data?.profile_path) : '/no-image.svg';
11 |
12 | const latestTrailer = data?.videos?.results?.filter((video) => video.official === true && video.type === "Trailer")?.[0];
13 |
14 | return <>
15 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
{data?.name}
28 |
29 |
{data?.known_for_department}, {data?.place_of_birth}
30 |
31 |
{data?.overview}
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
Biography
40 |
{data?.biography}
41 |
42 |
43 |
Also Known As
44 |
45 | {data?.also_known_as?.map((i, idx) => (
46 |
{i}
47 | ))}
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | }
58 |
59 | export async function getServerSideProps(ctx) {
60 | const _result = await (await fetch(`https://api.themoviedb.org/3/person/${ctx?.query?.id}?api_key=3044afc915e1301ae1d9551614db3711&append_to_response=videos,credits,reviews`).then(r => r.json()));
61 | const _cast = await (await fetch(`https://api.themoviedb.org/3/person/${ctx?.query?.id}/movie_credits?api_key=3044afc915e1301ae1d9551614db3711&append_to_response=videos,credits,reviews`).then(r => r.json()));
62 | if (_result?.status_code === 34) {
63 | if (ctx?.res) {
64 | ctx?.res.writeHead(307, { Location: '/' })
65 | ctx?.res.end()
66 | } else {
67 | Router.replace('/')
68 | }
69 | }
70 | return {
71 | props: {
72 | data: _result,
73 | movies: _cast
74 | },
75 | }
76 | }
77 |
78 | export default Movie;
--------------------------------------------------------------------------------
/src/pages/movies/[id].jsx:
--------------------------------------------------------------------------------
1 | import { AiFillStar } from "react-icons/ai"
2 | import { BsFillPlayFill } from "react-icons/bs"
3 | import WatchTrailer from "../../components/Global/WatchTrailer";
4 | import CardGroup from "../../components/Static/CardGroup";
5 | import Router from 'next/router'
6 | import { NextSeo } from 'next-seo';
7 |
8 | function Movie({ data }) {
9 | const backdropImage = data?.backdrop_path ? ("https://image.tmdb.org/t/p/original" + data?.backdrop_path) : '/no-image.svg';
10 | const verticalImage = data?.poster_path ? ("https://image.tmdb.org/t/p/w400" + data?.poster_path) : '/no-image.svg';
11 |
12 | const latestTrailer = data?.videos?.results?.filter((video) => video.official === true && video.type === "Trailer")?.[0];
13 |
14 | return <>
15 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
{data?.original_title}
26 |
27 |
{data?.release_date?.split('-')[0]}
28 |
29 |
{data?.genres?.[0]?.name}
30 | {data?.homepage && (
31 |
36 | )}
37 |
38 |
{data?.overview}
39 |
40 |
41 | {latestTrailer?.key && (
42 |
43 |
49 |
50 | )}
51 |
52 |
53 |
54 |
55 |
56 |
57 |
64 |
65 |
66 | }
67 |
68 | export async function getServerSideProps(ctx) {
69 | const _result = await (await fetch(`https://api.themoviedb.org/3/movie/${ctx?.query?.id}?api_key=3044afc915e1301ae1d9551614db3711&append_to_response=videos,credits,reviews`).then(r => r.json()));
70 | if (_result?.status_code === 34) {
71 | if (ctx?.res) {
72 | ctx?.res.writeHead(307, { Location: '/' })
73 | ctx?.res.end()
74 | } else {
75 | Router.replace('/')
76 | }
77 | }
78 | return {
79 | props: {
80 | data: _result
81 | },
82 | }
83 | }
84 |
85 | export default Movie;
--------------------------------------------------------------------------------
/src/pages/series/[id].jsx:
--------------------------------------------------------------------------------
1 | import { AiFillStar } from "react-icons/ai"
2 | import { BsFillPlayFill } from "react-icons/bs"
3 | import WatchTrailer from "../../components/Global/WatchTrailer";
4 | import CardGroup from "../../components/Static/CardGroup";
5 | import Router from 'next/router'
6 | import { NextSeo } from 'next-seo';
7 |
8 | function Movie({ data }) {
9 | const backdropImage = data?.backdrop_path ? ("https://image.tmdb.org/t/p/original" + data?.backdrop_path) : '/no-image.svg';
10 | const verticalImage = data?.poster_path ? ("https://image.tmdb.org/t/p/w400" + data?.poster_path) : '/no-image.svg';
11 |
12 | const latestTrailer = data?.videos?.results?.filter((video) => video.official === true && video.type === "Trailer")?.[0];
13 |
14 | return <>
15 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
{data?.name}
26 |
27 |
{data?.first_air_date?.split('-')[0]}
28 |
29 |
{data?.genres?.[0]?.name}
30 | {data?.homepage && (
31 |
36 | )}
37 |
38 |
{data?.overview}
39 |
40 |
41 | {latestTrailer?.key && (
42 |
43 |
49 |
50 | )}
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | a.poster_path !== null)} />
64 |
65 |
66 |
67 |
68 |
69 | }
70 |
71 | export async function getServerSideProps(ctx) {
72 | const _result = await (await fetch(`https://api.themoviedb.org/3/tv/${ctx?.query?.id}?api_key=3044afc915e1301ae1d9551614db3711&append_to_response=videos,credits,reviews`).then(r => r.json()));
73 | if (_result?.status_code === 34) {
74 | if (ctx?.res) {
75 | ctx?.res.writeHead(307, { Location: '/' })
76 | ctx?.res.end()
77 | } else {
78 | Router.replace('/')
79 | }
80 | }
81 | return {
82 | props: {
83 | data: _result
84 | },
85 | }
86 | }
87 |
88 | export default Movie;
--------------------------------------------------------------------------------
/src/components/Static/Header.jsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link"
2 | import { BsFillPlayFill } from "react-icons/bs"
3 | import { Menu, Transition } from '@headlessui/react'
4 | import { Fragment, useEffect, useRef, useState } from 'react'
5 |
6 | export default function Header() {
7 | return <>
8 |
9 |
17 |
32 |
105 |
106 |
107 | }
108 |
--------------------------------------------------------------------------------
/src/components/Static/Card.jsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from "next/router";
2 | import { AiFillStar } from "react-icons/ai"
3 | import { BsFillPlayFill } from "react-icons/bs"
4 | import Link from "next/link";
5 |
6 | export default function Card({ value = "movies", type = "vertical", movie }) {
7 | const router = useRouter();
8 | const verticalImage = value !== 'actors' ?
9 | (value === "actors" ? ("https://image.tmdb.org/t/p/w400" + movie?.profile_path) : ("https://image.tmdb.org/t/p/w400" + movie?.poster_path)) :
10 | (movie?.profile_path ? (value === "actors" ? ("https://image.tmdb.org/t/p/w400" + movie?.profile_path) : ("https://image.tmdb.org/t/p/w400" + movie?.poster_path)) : `https://avatars.dicebear.com/api/personas/${movie?.name?.replace(/ /g, '-')}.svg`)
11 | const backdropImage = "https://image.tmdb.org/t/p/original" + movie?.backdrop_path;
12 |
13 | const HorizontalCard = () => {
14 | return <>
15 |
16 |
19 |
20 |
21 |
{movie?.title || movie?.name}
22 | {value !== "actors" && value !== "seasons" && (
23 |
24 |
{movie?.vote_average}
25 |
26 | )}
27 |
28 |
29 |
30 |
31 | }
32 | const VerticalCard = () => {
33 | return <>
34 |
35 |
38 |
39 |
40 |
41 |
{movie?.title || movie?.name}
42 |
43 |
44 |
45 |
46 |
47 |
48 | }
49 | const HorticalCard = () => {
50 | return <>
51 |
52 |
53 |
54 |
55 |
56 |
57 |
{movie?.title || movie?.name}
58 |
{movie?.vote_average}
59 |
60 |
61 |
62 |
63 |
64 |
65 | }
66 | const RenderCards = () => {
67 | return <>
68 | {value !== "seasons" ? (
69 | <>
70 | {type === "horizontal" &&
71 |
72 |
73 |
74 |
75 |
76 | }
77 | {type === "vertical" &&
78 |
79 |
80 |
81 |
82 |
83 | }
84 | {type === "hortical" &&
85 |
86 |
87 |
88 |
89 |
90 | }
91 |
92 | ) : (
93 | <>
94 | {type === "horizontal" &&
95 |
96 |
97 |
98 | }
99 | {type === "vertical" &&
100 |
101 |
102 |
103 | }
104 | {type === "hortical" &&
105 |
106 |
107 |
108 | }
109 |
110 | )}
111 |
112 |
113 | }
114 | return <>
115 | {value !== "actors" && movie?.poster_path && (
116 |
117 | )}
118 | {value === "actors" && (
119 |
120 | )}
121 |
122 | }
--------------------------------------------------------------------------------
4 |
5 | #### [Demo](https://movie-app-clqu.vercel.app)
6 |
7 |
8 |
9 | ## Getting Started
10 |
11 | ### 🛠 Development Server
12 |
13 | ```bash
14 | npm install --s --f && npm run dev
15 | # or
16 | yarn install && yarn dev
17 | ```
18 | ### 🛠 Production Server
19 | ```bash
20 | npm install --s --f && npm run build && npm run start
21 | # or
22 | yarn install && yarn build && yarn start
23 | ```
24 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
25 | You can start editing the page by modifying `src/pages/index.js`. The page auto-updates as you edit the file.
26 |
27 |
28 | ## Learn More
29 |
30 | To learn more about Next.js, take a look at the following resources:
31 |
32 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
33 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
34 |
35 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
36 |
37 | ## Deploy on Vercel
38 |
39 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new/import?s=https://github.com/clqu/clqu.live&utm_source=clqu.live) from the clqu.
40 |
41 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
42 |
43 | ## ⭐ Star
44 | - Don't forget to star this repo for support :)
45 |
--------------------------------------------------------------------------------
/next-seo.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | title: "Movie App",
3 | description: "Find your best movie to make time beautiful.",
4 | canonical: "https://www.canonical.ie/",
5 | openGraph: {
6 | url: 'https://www.url.ie/a',
7 | title: 'Movie App',
8 | description: 'Find your best movie to make time beautiful.',
9 | images: [
10 | {
11 | url: 'https://camo.githubusercontent.com/7c2653420dcefe95b95440f99ee500ca3fb4bb610408a949d102fab2a73fe8af/68747470733a2f2f692e696d6775722e636f6d2f6d457443484c412e706e67',
12 | width: 800,
13 | height: 600,
14 | alt: 'Og Image Alt',
15 | type: 'image/jpeg',
16 | },
17 | {
18 | url: 'https://camo.githubusercontent.com/7c2653420dcefe95b95440f99ee500ca3fb4bb610408a949d102fab2a73fe8af/68747470733a2f2f692e696d6775722e636f6d2f6d457443484c412e706e67',
19 | width: 900,
20 | height: 800,
21 | alt: 'Og Image Alt Second',
22 | type: 'image/jpeg',
23 | },
24 | { url: 'https://camo.githubusercontent.com/7c2653420dcefe95b95440f99ee500ca3fb4bb610408a949d102fab2a73fe8af/68747470733a2f2f692e696d6775722e636f6d2f6d457443484c412e706e67' },
25 | { url: 'https://camo.githubusercontent.com/7c2653420dcefe95b95440f99ee500ca3fb4bb610408a949d102fab2a73fe8af/68747470733a2f2f692e696d6775722e636f6d2f6d457443484c412e706e67' },
26 | ],
27 | site_name: 'Movie App',
28 | },
29 | twitter: {
30 | handle: '@handle',
31 | site: '@site',
32 | cardType: 'summary_large_image',
33 | }
34 | };
35 |
--------------------------------------------------------------------------------
/src/pages/search.jsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import Image from 'next/image'
3 | import { FiFilter } from "react-icons/fi";
4 | import { BsSearch } from "react-icons/bs";
5 | import CardGroup from '../components/Static/CardGroup';
6 |
7 | function Search({ data, query }) {
8 | return <>
9 |
10 | 
26 | 
34 |