27 |
67 |
28 |
34 |
35 |
36 |
66 | {data.title || data.name}
37 |
38 |
40 |
41 |
43 | Release Date: {data.release_date}
42 |
44 | {data.genres.map((genre) => (
45 |
49 | {genre.name}
50 |
51 | ))}
52 |
53 | {data.overview}
54 |55 | Official website : 56 | 57 | 58 | {data.homepage} 59 | 60 | 61 |
62 | 65 |
68 |
83 |
84 | );
85 | };
86 |
87 | export default ItemDetailView;
88 |
--------------------------------------------------------------------------------
/components/ItemGrid.tsx:
--------------------------------------------------------------------------------
1 | import { ItemCard } from '@/components';
2 | import { MovieItemProps } from '@/model/movie';
3 |
4 | interface Props {
5 | items: MovieItemProps[];
6 | }
7 |
8 | const ItemGrid = ({ items }: Props) => {
9 | return (
10 |
69 |
72 |
73 | CASTS
70 |
74 | {videos.map((video) => (
75 |
78 |
79 |
82 | SIMILAR
80 |
11 | {items.map((item) => (
12 |
15 | );
16 | };
17 |
18 | export default ItemGrid;
19 |
--------------------------------------------------------------------------------
/components/ItemView.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next';
2 | import { ClipLoader } from 'react-spinners';
3 |
4 | import { MovieSliceParams } from '@/redux/movieSlice';
5 | import { ItemGrid, PageHeader, Button } from '@/components';
6 |
7 | interface Props extends MovieSliceParams {
8 | loadMore: () => void;
9 | media_type: 'movie' | 'tv';
10 | }
11 |
12 | const ItemView: NextPage
26 | {loading ? (
27 |
48 |
49 | );
50 | };
51 |
52 | export default ItemView;
53 |
--------------------------------------------------------------------------------
/components/Layout/Footer.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import { FaGithub, FaFacebook } from 'react-icons/fa';
3 |
4 | const Footer = () => {
5 | return (
6 |
29 | );
30 | };
31 |
32 | export default Footer;
33 |
--------------------------------------------------------------------------------
/components/Layout/Meta.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head';
2 | import { NextPage } from 'next';
3 |
4 | interface MetaProps {
5 | title: string;
6 | description: string;
7 | image: string;
8 | }
9 |
10 | const Meta: NextPage
28 |
30 | ) : (
31 | <>
32 |
33 |
35 |
36 |
38 | {page < total_pages && (
39 |
40 |
43 |
44 | )}
45 |
46 | )}
47 |
38 |
61 | );
62 | };
63 |
64 | export default Navbar;
65 |
--------------------------------------------------------------------------------
/components/Layout/NavbarLink.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 |
3 | const headerNav = [
4 | {
5 | display: 'Home',
6 | path: '/',
7 | },
8 | {
9 | display: 'Movies',
10 | path: '/movie',
11 | },
12 | {
13 | display: 'TV Series',
14 | path: '/tv',
15 | },
16 | ];
17 |
18 | const NavbarLink = () => {
19 | return (
20 |
39 |
60 |
40 |
51 |
41 |
42 |
43 |
50 |
44 |
46 | TV FILM
47 |
48 |
49 |
52 |
56 |
53 |
55 |
57 |
59 |
21 |
29 | );
30 | };
31 |
32 | export default NavbarLink;
33 |
--------------------------------------------------------------------------------
/components/Layout/Pagination.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next';
2 | import { GrPrevious, GrNext } from 'react-icons/gr';
3 |
4 | interface Props {
5 | total: number;
6 | }
7 |
8 | const Pagination: NextPage-
22 | {headerNav.map((item) => (
23 |
24 | {item.display}
25 |
26 | ))}
27 |
11 |
20 | );
21 | };
22 |
23 | export default Pagination;
24 |
--------------------------------------------------------------------------------
/components/Layout/Search.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useRouter } from 'next/router';
3 | import { AiOutlineSearch } from 'react-icons/ai';
4 | import cn from 'classnames';
5 |
6 | import { MediaType } from '@/model/movie';
7 | import { mediaTypes } from '@/ultis/constants';
8 | import { Input } from '@/components';
9 |
10 | const Search = () => {
11 | const router = useRouter();
12 | const [value, setValue] = useState('');
13 | const [typeFillter, setTypeFillter] = useState
12 |
14 | 1
15 | 1
16 |
17 |
19 |
36 | e.key === 'Enter' && handleSearch()}
42 | />
43 |
72 | );
73 | };
74 |
75 | export default Search;
76 |
--------------------------------------------------------------------------------
/components/Modal.tsx:
--------------------------------------------------------------------------------
1 | import Cn from 'classnames';
2 | import { AiOutlineClose } from 'react-icons/ai';
3 |
4 | interface Props {
5 | isVisible: boolean;
6 | id?: number;
7 | onClose: () => void;
8 | trailerEndPoint?: string;
9 | }
10 |
11 | const Modal = ({ isVisible, id, onClose, trailerEndPoint }: Props) => {
12 | return (
13 |
44 |
71 |
48 |
50 | -
51 | {mediaTypes.map((mediaType) => (
52 |
- setTypeFillter(mediaType)} 65 | > 66 | {mediaType} 67 | 68 | ))} 69 |
20 |
35 | );
36 | };
37 |
38 | export default Modal;
39 |
--------------------------------------------------------------------------------
/components/PageHeader.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next';
2 | import { MediaType } from '@/model/movie';
3 |
4 | interface Props {
5 | media_type: MediaType;
6 | isSearchPage?: boolean;
7 | keyword?: string;
8 | }
9 |
10 | const PageHeader: NextPage
21 |
27 |
34 |
31 |
33 |
28 |
39 | );
40 | };
41 |
42 | export default PageHeader;
43 |
--------------------------------------------------------------------------------
/components/Rating.tsx:
--------------------------------------------------------------------------------
1 | import Cn from 'classnames';
2 | import { FaStar } from 'react-icons/fa';
3 |
4 | interface Props {
5 | rating: number;
6 | className?: string;
7 | size?: number;
8 | }
9 |
10 | const Rating = ({ rating, className, size = 14 }: Props) => {
11 | return (
12 | 29 | {isSearchPage ? ( 30 | <> 31 | Search {typePage(media_type)} by keyword : 32 | {keyword} 33 | 34 | ) : ( 35 | `All ${typePage(media_type)}` 36 | )} 37 |
38 |
18 |
24 | );
25 | };
26 |
27 | export default Rating;
28 |
--------------------------------------------------------------------------------
/components/Slider/ItemCard.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import { FaPlayCircle } from 'react-icons/fa';
3 |
4 | import { Button, Rating } from '@/components';
5 | import { MovieItemProps } from '@/model/movie';
6 | import { w500Image } from '@/ultis/constants';
7 |
8 | interface Props {
9 | item: MovieItemProps;
10 | }
11 |
12 | const ItemCard = ({ item }: Props) => {
13 | const bg = w500Image(item.poster_path || item.backdrop_path);
14 | return (
15 |
16 |
17 | 19 | {rating.toFixed(1)} 20 |
21 | 22 |
18 |
46 |
47 |
48 | );
49 | };
50 |
51 | export default ItemCard;
52 |
--------------------------------------------------------------------------------
/components/Slider/ItemList.tsx:
--------------------------------------------------------------------------------
1 | import { Swiper, SwiperSlide } from 'swiper/react';
2 | import { Scrollbar, Mousewheel, FreeMode } from 'swiper';
3 |
4 | import ItemCard from './ItemCard';
5 | import { MovieItemProps } from '@/model/movie';
6 |
7 | interface Props {
8 | items: MovieItemProps[];
9 | vertical?: boolean;
10 | }
11 |
12 | // SwiperCore.use([Keyboard]);
13 |
14 | const ItemList = ({ items, vertical = false }: Props) => {
15 | const styleSlide = {
16 | width: vertical ? '100%' : '15%',
17 | // height: '15%',
18 | };
19 | return (
20 |
26 |
42 | 43 | {item.title || item.name} 44 |
45 |
17 |
25 | );
26 | };
27 |
28 | export default ItemSlider;
29 |
--------------------------------------------------------------------------------
/components/Slider/MainSlider.tsx:
--------------------------------------------------------------------------------
1 | // import { useState } from 'react';
2 | import SwiperCore, { Autoplay } from 'swiper';
3 | import { Swiper, SwiperSlide } from 'swiper/react';
4 |
5 | import { useAppDispatch, useAppSelector } from '@/redux/hooks';
6 | import { activeModalId } from '@/redux/modalSlice';
7 | import { MovieItemProps } from '@/model/movie';
8 | import { Modal, MainSliderItem } from '@/components';
9 |
10 | SwiperCore.use([Autoplay]);
11 |
12 | interface Props {
13 | movieItems: MovieItemProps[];
14 | }
15 |
16 | const MainSlider = ({ movieItems }: Props) => {
17 | const dispatch = useAppDispatch();
18 | const { idVisible, trailerEndPoint } = useAppSelector((state) => state.modal);
19 | const closeModal = () => {
20 | dispatch(activeModalId(undefined));
21 | };
22 |
23 | return (
24 |
18 |
23 | {title}
19 | 22 |
25 |
31 | {movieItems.map((item) => (
32 |
33 | {({ isActive }) => (
34 |
37 | ))}
38 |
39 | {movieItems.map((item) => (
40 |
49 | );
50 | };
51 |
52 | export default MainSlider;
53 |
--------------------------------------------------------------------------------
/components/Slider/MainSliderItem.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from 'next/router';
2 | import Image from 'next/image';
3 | import Cn from 'classnames';
4 |
5 | import { useAppDispatch } from '@/redux/hooks';
6 | import { activeModalId, fetchMovieTrailer } from '@/redux/modalSlice';
7 | import { imageOriginal, w500Image } from '@/ultis/constants';
8 | import { MovieItemProps } from '@/model/movie';
9 | import { Button, Rating } from '@/components';
10 |
11 | interface Props {
12 | item: MovieItemProps;
13 | isActive: boolean;
14 | }
15 |
16 | const MainSliderItem = ({ item, isActive }: Props) => {
17 | const dispatch = useAppDispatch();
18 | const router = useRouter();
19 | const background = imageOriginal(item.backdrop_path || item.poster_path);
20 |
21 | const handleWatchTrailer = () => {
22 | dispatch(activeModalId(item.id));
23 | dispatch(fetchMovieTrailer(item.id));
24 | };
25 |
26 | return (
27 |
35 |
78 | );
79 | };
80 |
81 | export default MainSliderItem;
82 |
--------------------------------------------------------------------------------
/components/Video/VideoItem.tsx:
--------------------------------------------------------------------------------
1 | import { useRef, useEffect } from 'react';
2 |
3 | import { VideoTrailer } from '@/model/movie';
4 |
5 | interface Props {
6 | item: VideoTrailer;
7 | }
8 |
9 | const VideoItem = ({ item }: Props) => {
10 | const iframeRef = useRef
36 |
77 | *~*]:mt-12 px-12 w-[55%] [&>*]:transition-[transform,opacity] [&>*]:duration-[500ms,500ms] [&>*]:ease-[ease,ease]',
39 | isActive
40 | ? 'scale-100 translate-y-0'
41 | : '[&>*]:opacity-0 [&>*]:translate-y-[-100px]'
42 | )}
43 | >
44 |
64 | 45 | {item.title} 46 |
47 |
56 |
59 |
62 |
63 |
65 |
76 |
18 |
27 | );
28 | };
29 |
30 | export default VideoItem;
31 |
--------------------------------------------------------------------------------
/components/Watch/AboutDetail.tsx:
--------------------------------------------------------------------------------
1 | import { Rating } from '@/components';
2 | import { airDate } from '@/ultis/constants';
3 |
4 | interface Props {
5 | title?: string;
6 | name: string;
7 | overview: string;
8 | release_date?: string;
9 | first_air_date?: string;
10 | last_air_date?: string;
11 | air_date?: string;
12 | vote_average: number;
13 | }
14 |
15 | const AboutDetail = ({
16 | title,
17 | name,
18 | overview,
19 | release_date,
20 | first_air_date,
21 | last_air_date,
22 | air_date,
23 | vote_average,
24 | }: Props) => {
25 | return (
26 | {item.name}
19 | 26 |
27 |
40 | );
41 | };
42 |
43 | export default AboutDetail;
44 |
--------------------------------------------------------------------------------
/components/buttons/Button.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import Cn from 'classnames';
4 | interface Props {
5 | onClick?: () => void;
6 | children: ReactNode;
7 | small?: boolean;
8 | outline?: boolean;
9 | className?: string;
10 | }
11 |
12 | const Button = ({
13 | onClick,
14 | children,
15 | small = false,
16 | outline = false,
17 | className,
18 | }: Props) => {
19 | return (
20 |
31 | );
32 | };
33 |
34 | export default Button;
35 |
--------------------------------------------------------------------------------
/components/index.tsx:
--------------------------------------------------------------------------------
1 | import Footer from './Layout/Footer';
2 | import Meta from './Layout/Meta';
3 | import Navbar from './Layout/Navbar';
4 | import NavbarLink from './Layout/NavbarLink';
5 | import Pagination from './Layout/Pagination';
6 | import Search from './Layout/Search';
7 | import CastList from './Cast/CastList';
8 | import CastItem from './Cast/CastItem';
9 | import Input from './Input';
10 | import ItemCard from './Slider/ItemCard';
11 | import ItemList from './Slider/ItemList';
12 | import MainSlider from './Slider/MainSlider';
13 | import MainSliderItem from './Slider/MainSliderItem';
14 | import ItemSlider from './Slider/ItemSlider';
15 | import VideoItem from './Video/VideoItem';
16 | import Button from './buttons/Button';
17 | import Modal from './Modal';
18 | import Rating from './Rating';
19 | import ItemGrid from './ItemGrid';
20 | import PageHeader from './PageHeader';
21 | import ItemView from './ItemView';
22 | import ItemDetailView from './ItemDetailView';
23 | import AboutDetail from './Watch/AboutDetail';
24 |
25 | export {
26 | Footer,
27 | Meta,
28 | Navbar,
29 | NavbarLink,
30 | Pagination,
31 | Search,
32 | CastList,
33 | CastItem,
34 | Input,
35 | ItemCard,
36 | ItemList,
37 | MainSlider,
38 | MainSliderItem,
39 | ItemSlider,
40 | VideoItem,
41 | Button,
42 | Modal,
43 | Rating,
44 | ItemGrid,
45 | PageHeader,
46 | ItemView,
47 | ItemDetailView,
48 | AboutDetail,
49 | };
50 |
--------------------------------------------------------------------------------
/model/movie.ts:
--------------------------------------------------------------------------------
1 | export type MediaType = 'all' | 'movie' | 'tv';
2 |
3 | export interface Childs {
4 | backdrop_path: string;
5 | poster_path: string;
6 | id: number;
7 | title: string;
8 | name: string;
9 | overview: string;
10 | vote_average: number;
11 | genres: { id: number; name: string }[];
12 | release_date: string;
13 | homepage: string;
14 | }
15 |
16 | export interface MovieItemProps extends Childs {
17 | adult?: boolean;
18 | media_type: 'movie' | 'tv';
19 | }
20 |
21 | export interface Cast {
22 | id: number;
23 | name: string;
24 | profile_path: string;
25 | character: string;
26 | }
27 |
28 | export interface VideoTrailer {
29 | name: string;
30 | key: string;
31 | }
32 |
--------------------------------------------------------------------------------
/model/tv.ts:
--------------------------------------------------------------------------------
1 | import { Childs } from '@/model/movie';
2 |
3 | export interface Episode {
4 | id: number;
5 | air_date: string;
6 | episode_number: number;
7 | name: string;
8 | overview: string;
9 | still_path: string;
10 | vote_average: number;
11 | vote_count: number;
12 | }
13 |
14 | export interface Season {
15 | id: number;
16 | episodes: Episode[];
17 | name: string;
18 | overview: string;
19 | poster_path: string;
20 | season_number: number;
21 | }
22 |
23 | export interface TypeTvDetail extends Childs {
24 | first_air_date: string;
25 | last_air_date: string;
26 | seasons: {
27 | episode_count: number;
28 | season_number: number;
29 | }[];
30 | number_of_episodes: number;
31 | number_of_seasons: number;
32 | }
33 |
--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// {title || name}
28 |{overview}
29 | {release_date &&Release Date: {release_date}
} 30 | 31 | {first_air_date && last_air_date && ( 32 |Air Date: {airDate(first_air_date, last_air_date)}
33 | )} 34 | {air_date &&Air Date: {air_date}
} 35 | 36 |
37 |
39 |
21 |
28 |
29 | );
30 | };
31 |
32 | export const getStaticProps: GetStaticProps = async () => {
33 | try {
34 | const data = await getHomeData();
35 | return {
36 | props: {
37 | data,
38 | },
39 | revalidate: 3600,
40 | };
41 | } catch (error) {
42 | console.log(error);
43 | return {
44 | notFound: true,
45 | revalidate: true,
46 | };
47 | }
48 | };
49 |
50 | export default Home;
51 |
--------------------------------------------------------------------------------
/pages/movie/[id]/index.tsx:
--------------------------------------------------------------------------------
1 | import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
2 |
3 | import { ItemDetailView, Meta } from '@/components';
4 | import { MovieItemProps, Cast, VideoTrailer } from '@/model/movie';
5 | import { imageOriginal } from '@/ultis/constants';
6 | import { getMovieDetails } from '@/ultis/tmdbApi';
7 |
8 | interface Props {
9 | data: MovieItemProps;
10 | casts: Cast[];
11 | videos: VideoTrailer[];
12 | similar: MovieItemProps[];
13 | }
14 |
15 | const Movie: NextPage
23 | {Object.keys(data).map((key) => (
24 |
27 |
22 |
49 |
50 | );
51 | };
52 |
53 | export const getStaticProps: GetStaticProps = async ({ params }) => {
54 | try {
55 | const movieId = Number(params!.id);
56 | const response = await getWatchMovieDetail(movieId);
57 | return {
58 | props: {
59 | ...response,
60 | },
61 | revalidate: 3600,
62 | };
63 | } catch (error) {
64 | return {
65 | notFound: true,
66 | revalidate: true,
67 | };
68 | }
69 | };
70 |
71 | export const getStaticPaths: GetStaticPaths = async () => {
72 | return {
73 | paths: [],
74 | fallback: 'blocking',
75 | };
76 | };
77 |
78 | export default Watch;
79 |
--------------------------------------------------------------------------------
/pages/movie/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | import { useAppDispatch, useAppSelector } from '@/redux/hooks';
4 | import { fetchMovies, fetchLoadMoreMovies } from '@/redux/movieSlice';
5 | import { ItemView, Meta } from '@/components';
6 |
7 | const Movie = () => {
8 | const dispatch = useAppDispatch();
9 | const { loading, loadingMore, items, page, total_pages } = useAppSelector(
10 | (state) => state.movie
11 | );
12 |
13 | useEffect(() => {
14 | dispatch(fetchMovies());
15 | }, [dispatch]);
16 |
17 | const loadMore = () => {
18 | dispatch(fetchLoadMoreMovies(page + 1));
19 | };
20 |
21 | return (
22 | <>
23 |
28 |
23 |
48 |
24 |
41 |
25 |
32 |
33 |
42 |
47 | SIMILAR
43 |
44 |
46 |
38 |
40 |
37 |
131 |
132 | );
133 | };
134 |
135 | export const getServerSideProps: GetServerSideProps = async ({
136 | query,
137 | params,
138 | }) => {
139 | try {
140 | const id = Number(params!.id);
141 | const seasonNumber = Number(query.season);
142 | const episodeNumber = Number(query.episode);
143 |
144 | if (!seasonNumber || !episodeNumber) return { notFound: true };
145 |
146 | const res = (await getTVSeasons(id)) as {
147 | data: TypeTvDetail;
148 | seasons: Season[];
149 | };
150 |
151 | const episode = res.seasons
152 | .find((season) => season.season_number === seasonNumber)!
153 | .episodes.find((item) => item.episode_number === episodeNumber);
154 |
155 | if (!episode) return { notFound: true };
156 |
157 | return {
158 | props: {
159 | ...res,
160 | seasonNumber,
161 | episodeNumber,
162 | episode,
163 | },
164 | };
165 | } catch (error) {
166 | console.log(error);
167 | return {
168 | notFound: true,
169 | };
170 | }
171 | };
172 |
173 | export default Watch;
174 |
--------------------------------------------------------------------------------
/pages/tv/[id]/index.tsx:
--------------------------------------------------------------------------------
1 | import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
2 |
3 | import { ItemDetailView, Meta } from '@/components';
4 | import { MovieItemProps, Cast, VideoTrailer } from '@/model/movie';
5 | import { imageOriginal } from '@/ultis/constants';
6 | import { getTVDetails } from '@/ultis/tmdbApi';
7 |
8 | interface Props {
9 | data: MovieItemProps;
10 | casts: Cast[];
11 | videos: VideoTrailer[];
12 | similar: MovieItemProps[];
13 | }
14 |
15 | const TV: NextPage
38 |
130 |
39 |
55 |
40 |
47 |
48 |
56 |
129 | Other Episodes
57 |
58 | {seasons.map((season) => (
59 |
128 |
60 |
126 | ))}
127 |
63 | openSeason === season.season_number
64 | ? setOpenSeason(undefined)
65 | : setOpenSeason(season.season_number)
66 | }
67 | >
68 | })
73 |
81 | {openSeason === season.season_number && (
82 | 78 | {season.name} 79 |
80 |
83 | {season.episodes.map((episode) => (
84 |
94 |
106 | })
111 |
124 | )}
125 | 118 | Episode {episode.episode_number} 119 |
120 | 121 | 122 | ))} 123 |
26 |
139 |
140 | );
141 | };
142 |
143 | export const getStaticProps: GetStaticProps = async ({ params }) => {
144 | try {
145 | const tvId = Number(params!.id);
146 | const response = await getTVSeasons(tvId);
147 | return {
148 | props: {
149 | ...response,
150 | },
151 | revalidate: 3600,
152 | };
153 | } catch (error) {
154 | return {
155 | notFound: true,
156 | revalidate: true,
157 | };
158 | }
159 | };
160 |
161 | export const getStaticPaths: GetStaticPaths = async () => {
162 | return {
163 | paths: [],
164 | fallback: 'blocking',
165 | };
166 | };
167 |
168 | export default Watch;
169 |
--------------------------------------------------------------------------------
/pages/tv/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | import { useAppDispatch, useAppSelector } from '@/redux/hooks';
4 | import { fetchTVs, fetchLoadMoreTVs } from '@/redux/tvSlice';
5 | import { ItemView, Meta } from '@/components';
6 |
7 | const TV = () => {
8 | const dispatch = useAppDispatch();
9 | const { loading, loadingMore, items, page, total_pages } = useAppSelector(
10 | (state) => state.tv
11 | );
12 |
13 | useEffect(() => {
14 | dispatch(fetchTVs());
15 | }, [dispatch]);
16 |
17 | const loadMore = () => {
18 | dispatch(fetchLoadMoreTVs(page + 1));
19 | };
20 |
21 | return (
22 | <>
23 |
28 |
27 |
138 |
28 |
50 |
135 | ))}
136 |
137 |
29 |
47 |
30 | })
35 |
36 |
37 |
46 | Seasons
48 | {seasons.map((item) => ( 49 |
57 | openId === item.id
58 | ? setOpenId(undefined)
59 | : setOpenId(item.id)
60 | }
61 | >
62 |
92 |
63 | })
68 |
69 |
70 |
91 |
71 |
90 |
72 |
84 | {item.overview && (
85 |
73 |
83 | 77 | {item.name} 78 |
79 |80 | {xEpisodes(item.episodes.length)} 81 |
82 |
86 |
88 | )}
89 | {item.overview}
87 |
93 | {openId === item.id &&
94 | item.episodes.map((episode) => (
95 |
105 |
109 |
119 |
134 |
110 |
114 | 111 | {episode.episode_number} 112 |
113 |
120 |
130 |
131 |
132 | ))}
133 | 124 | {episode.name} 125 |
126 |127 | {episode.air_date} 128 |
129 |