first initial commit with added files

components/FilterLists.tsx

@@ -0,0 +1,47 @@
+import Accordion from 'react-bootstrap/Accordion';
+import React, { useState, useEffect } from 'react'
+import SortFilterList from './SortFilterList';
+import { Form } from 'react-bootstrap';
+import { fetchGenreMoviesList } from '@/services/axios.service';
+import { GenreInterface } from '@/interface/genreinterface';
+
+const FilterLists = (props: any) => {
+  const {searchKeyword, setSearchKeyword, genreId, setGenreId} = props;
+
+  const [genreList, setGenreList] = useState<GenreInterface[]>([]);
+
+  const fetchData = async () => {
+    const resp = await fetchGenreMoviesList();
+      console.log(resp);
+      setGenreList(resp.genres);
+  }
+  useEffect(() => {
+      fetchData();
+  }, [])
+  return (
+    <Accordion className='mt-2'>
+        <Accordion.Item eventKey="0">
+        <Accordion.Header className='h2'>Filters</Accordion.Header>
+        <Accordion.Body>
+            <h6>Genres</h6>
+            <div className="genreslist my-2">
+                <select value={genreId} onChange={(e) => setGenreId(e.target.value)} className="Select Select_sm select-sortingfilters py-2 rounded w-100 my-2">
+                    <option value="">Genre Movies List</option>
+                    {
+                        genreList && genreList.map( (genre: any) => {
+
+                                return (<option key={genre.id} value={genre.id}>{genre.name}</option>)
+                        })
+                    }                    
+                </select>
+            </div>
+            <p>Filter genres by given above list</p>
+
+            <Form.Control value={searchKeyword} onChange={(e) => setSearchKeyword(e.target.value)} type='text' placeholder='Search Keywords' />
+        </Accordion.Body>
+        </Accordion.Item>        
+    </Accordion>
+  )
+}
+
+export default FilterLists

components/FilterMoviesAside.tsx

@@ -0,0 +1,21 @@
+import Accordion from 'react-bootstrap/Accordion';
+import React, { useState } from 'react'
+import SortFilterList from './SortFilterList';
+
+const FilterMoviesAside = (props: any) => { 
+    const { sortFiltervalue , setSortFiltervalue} = props;
+  return (
+    <Accordion>
+        <Accordion.Item eventKey="0">
+        <Accordion.Header className='h2'>Sort</Accordion.Header>
+        <Accordion.Body>
+            <h6>Sort Results By</h6>
+            <SortFilterList sortFiltervalue={sortFiltervalue} setSortFiltervalue={setSortFiltervalue} />
+            <p>Filter sort by given above list</p>
+        </Accordion.Body>
+        </Accordion.Item>        
+    </Accordion>
+  )
+}
+
+export default FilterMoviesAside

components/FooteComp.tsx

@@ -0,0 +1,29 @@
+import Link from 'next/link'
+import React from 'react'
+import { Facebook, Github, Instagram } from 'react-bootstrap-icons';
+
+const FooteComp = () => {
+  return (
+    <>
+        <div className="container py-2">
+            <div className="row">
+                <div className='d-flex flex-row justify-content-between align-items-center'>
+                <div className='text-center text-white'>
+                    Copyright © 2023 The Movie App
+                </div>
+
+                <div className="text-center text-white">
+                    <Link href="#!" className="btn btn-primary gap-2"><Facebook /></Link>
+                    <Link href="#!" className="btn btn-danger mx-3 gap-2"><Instagram /></Link>
+                    <Link href="#!" className="btn btn-secondary gap-2"><Github /></Link>
+
+                </div>
+                </div>
+
+            </div>
+        </div>
+    </>
+  )
+}
+
+export default FooteComp

components/Header.tsx

@@ -0,0 +1,35 @@
+import Link from 'next/link'
+import React from 'react'
+
+const HeaderComponent = () => {
+  return (
+    <>
+        <div className='container'>
+            <div className='row'>
+            <nav className='d-flex justify-content-between align-items-center p-2 '>
+            <div className='logo text-white-50'>
+                <Link href='/' className="text-white-50">
+                <svg width='40px' height="40px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-2 h-2">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0118 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 7.746 6 7.125v-1.5M4.875 8.25C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0118 7.125v-1.5m1.125 2.625c-.621 0-1.125.504-1.125 1.125v1.5m2.625-2.625c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125M18 5.625v5.25M7.125 12h9.75m-9.75 0A1.125 1.125 0 016 10.875M7.125 12C6.504 12 6 12.504 6 13.125m0-2.25C6 11.496 5.496 12 4.875 12M18 10.875c0 .621-.504 1.125-1.125 1.125M18 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m-12 5.25v-5.25m0 5.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125m-12 0v-1.5c0-.621-.504-1.125-1.125-1.125M18 18.375v-5.25m0 5.25v-1.5c0-.621.504-1.125 1.125-1.125M18 13.125v1.5c0 .621.504 1.125 1.125 1.125M18 13.125c0-.621.504-1.125 1.125-1.125M6 13.125v1.5c0 .621-.504 1.125-1.125 1.125M6 13.125C6 12.504 5.496 12 4.875 12m-1.5 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M19.125 12h1.5m0 0c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h1.5m14.25 0h1.5" />
+                </svg>
+                The Movie App
+                </Link>
+            </div>
+            <div className='navbarmenu'>
+                <Link className='mx-2 px-2 text-white-50 hover:text-danger' href="/movies/popular">Popular Movies</Link>
+                <Link className='mx-2 px-2 text-white-50' href="/movies/toprated">Top Rated Movies</Link>
+                <Link className='mx-2 px-2 text-white-50' href="/movies/nowplaying">Now Playing Movies</Link>
+                <Link className='mx-2 px-2 text-white-50' href="/movies/upcoming">Upcoming Movies</Link>
+                <Link className='mx-2 px-2 text-white-50' href="/popular/peoples">Popular Peoples</Link>
+
+            </div>
+
+        </nav>
+            </div>
+        </div>
+
+    </>
+  )
+}
+
+export default HeaderComponent

components/HeroComp.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const HeroComp = () => {
+  return (
+    <>
+        <div className='heroimageparent'>
+             <img className='heroimage' src="./movies-hero-image.jpg" alt="Hero image of movies app" />
+             <div className="heroimgserchbox">
+                    <h2>welcome.</h2>
+                    <h4>Millions of movies, TV shows and people to discover. Explore now.</h4>
+                    <div className='searchbox'>
+                        <input type='search' name='search' placeholder='Search for a movie' />
+                        <button>Search</button>
+                    </div>
+             </div>
+        </div>
+    </>
+  )
+}
+
+export default HeroComp

components/Layouts.tsx

@@ -0,0 +1,23 @@
+import { Content } from "next/font/google"
+import HeaderComponent from "./Header"
+import FooteComp from "./FooteComp"
+
+const RootLayouts = (props: any) => {
+  return (
+    <>
+
+          <div className="bg-secondary bg-gradient">
+            <header><HeaderComponent /></header>
+          </div>
+          <div className="main-content">
+            <main>{props.children}</main>
+          </div>
+        <div className="footerpart bg-secondary bg-gradient">
+          <footer><FooteComp /></footer>
+        </div>
+
+    </>
+  )
+}
+
+export default RootLayouts

components/MovieCard.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { MovieCardInterface } from '@/interface/movieinterface'
+/* interface MovieCardInterface{  
+  title: string;
+  poster: string;
+  releaseYear: string;
+  rating: number;
+  index: number;
+} */
+const MovieCard = ({title, poster, releaseYear, rating, index}: MovieCardInterface) => {
+  return (
+      <div className='col-3 mb-2'>
+          {poster != '' ?<img className='w-full img-fluid' alt={title} src={poster} />:''}
+          <div className='px-6 py-4 text-white'>
+              <div className='font-bold text-xl mb-2'>{title}</div>
+              <p className='text-gray-700 tet-base mb-2'>Release Year {releaseYear && releaseYear.split("-")[0]}</p>
+              <p className='text-purple-400 text-base'>Rating: {rating}</p>
+          </div>
+    </div>
+  )
+}
+
+export default MovieCard

components/MoviesCarousel.tsx

@@ -0,0 +1,26 @@
+import Carousel from 'react-bootstrap/Carousel';
+import { MovieCarouselInterface } from '@/interface/movieinterface'; 
+const MoviesCarousel = ({title, poster, overview, index} : MovieCarouselInterface) => {
+  return (
+        <Carousel.Item interval={500} className='active'>
+            <img
+            className="d-block w-100"
+            src={poster}
+            alt={title}
+            />
+            <Carousel.Caption>
+            <h3>{title}</h3>
+            <p>{overview}</p>
+            </Carousel.Caption>
+        </Carousel.Item>
+  )
+};
+
+{/* <MoviesCarousel 
+                          key={movie.id} 
+                          poster={'https://image.tmdb.org/t/p/w500/'+ movie.poster_path} 
+                          title={movie.title}
+                          index={ind}
+                          overview={movie.overview}  /> */}
+
+export default MoviesCarousel

components/PopularMovies.tsx

@@ -0,0 +1,53 @@
+import Carousel from 'react-bootstrap/Carousel'; 
+import {useState, useEffect } from 'react' 
+import { fetchMoviesByParamsData } from '@/services/axios.service';
+import MoviesCarousel from './MoviesCarousel';
+import { MovieInterface } from '@/interface/movieinterface';
+import MovieCard from './MovieCard';
+
+const PopularMovies = () => {
+
+  const [movies, setMovies] = useState<MovieInterface[]>();
+
+  const [page, setPage] = useState<number>(1);
+  const fetchData =async () => {
+        const resp = await fetchMoviesByParamsData({now_playing: 'popular', page});
+        //console.log(resp);
+        setMovies(resp.results);
+  }
+  useEffect(() => {
+      fetchData();
+  }, [])
+  return (
+    <>
+    <div className="bg-secondary bg-gradient">
+        <div className='container my-2'>
+          <div className='row'>
+          <h1 className='text-1xl font-bold mb-4'>Popular Movies</h1>
+            <div className='popularmovies row row row-cols-4'>
+                  {
+                      movies && movies.map((movie: any, index: number) => {
+                          return <MovieCard 
+                          key={movie.id} 
+                          poster={movie.poster_path != null ?'https://image.tmdb.org/t/p/w342/'+ movie.poster_path:''} 
+                          title={movie.title}
+                          releaseYear={movie.release_date}
+                          rating={movie.vote_average}
+                          index={index}
+
+                        />
+                      })
+                  }
+
+
+
+
+                </div>
+              </div>
+          </div>
+      </div>     
+    </>
+  )
+}
+
+export default PopularMovies

components/PopularPeoples.tsx

@@ -0,0 +1,58 @@
+import Carousel from 'react-bootstrap/Carousel'; 
+import {useState, useEffect } from 'react' 
+import { fetchPopularPeoples } from '@/services/axios.service';
+import { PeopleInterface } from '@/interface/peopleinterface';
+
+const PopularPeoples = () => {
+  const [index, setIndex] = useState<number>(0);
+
+  const [peoples, setPeoples] = useState<PeopleInterface[]>();
+
+  const handleSelect = (selectedIndex: number) => {
+    console.log(selectedIndex, 'selected index value');
+    setIndex(selectedIndex);
+  };
+  const fetchData =async () => {
+        const resp = await fetchPopularPeoples();
+        //console.log(resp);
+        setPeoples(resp.results);
+  }
+  useEffect(() => {
+      fetchData();
+  }, [])
+  return (
+    <>
+      <div className='container my-2'>
+          <div className='row'>
+              <h3>Popular Peoples</h3>
+            <Carousel  activeIndex={index} onSelect={handleSelect}>
+                {
+                   peoples && peoples.map((people: any, ind: number) => {
+
+                      return (   
+                        <Carousel.Item key={ind} interval={2000}>
+                          <img 
+                          className="d-block w-100"
+                          src={'https://image.tmdb.org/t/p/original'+ people.profile_path}
+                          alt={people.name}
+                          />
+                          <Carousel.Caption>
+                          <h3>{people.name}</h3>
+                          <p>{people.known_for[0].title}</p>
+                          </Carousel.Caption>
+                      </Carousel.Item>                       
+
+
+                      );
+                  })
+                }                
+            </Carousel> 
+
+          </div>
+      </div>       
+    </>
+
+  )
+}
+
+export default PopularPeoples

components/PopularPersonCard.tsx

@@ -0,0 +1,28 @@
+import { PopularPersonCardInterface } from '@/interface/peopleinterface';
+const PopularPersonCard = ( {name, profile_path, known_for, index}: PopularPersonCardInterface) => {
+  return (    
+            <div key={`card_$(index)`} className='col-3 mb-2'>
+                {profile_path != '' ?<img className='w-full img-fluid' alt={name} src={profile_path} />:''}
+                <div className='px-6 py-4 text-black'>
+                    <div className='fw-bold text-xl mb-2 name'>{name}</div>
+                    <div className='text-gray-700 tet-base mb-2'>                       
+                        <div className="sub">
+                        { known_for && (
+                            known_for.map((movie: any, ind: number) => {
+                                return (
+
+                                    <p className='d-inline-block text-wrap me-1 fst-italic'>{movie.title? movie.title: ''} 
+                                        { ind === known_for.length - 1  ? ' ':' ,'}
+                                     </p>
+                                )
+                            })
+                        ) }
+                        </div>
+                    </div>                    
+                </div>
+            </div>
+
+        )
+}
+
+export default PopularPersonCard