Merge pull request #24 from SchoolOfCode/Header_API

Header api

my-next-app/src/app/moviepage/page.jsx

@@ -20,7 +20,7 @@ export default function MoviePage() {
       .then((response) => response.json())
       .then((data) => {
         setMovieData(data);
-        //console.log(data);
+        console.log(data);
       })
       .catch((err) => console.error(err));
   }, [movieId]);
@@ -37,7 +37,7 @@ export default function MoviePage() {
       .then((response) => response.json())
       .then((data) => {
         setReviewData(data);
-        //console.log(data);
+        console.log(data);
       })
       .catch((err) => console.error(err));
   }, [movieId]);

my-next-app/src/app/movies/[id]/page.jsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useState, useEffect } from 'react';
+import styles from './page.module.css';
+
+export default function MovieDetail() {
+  const params = useParams(); // Access route parameters
+  const { id } = params || {}; // Destructure 'id' safely
+
+  const [movie, setMovie] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!id) return; // Wait until 'id' is available
+
+    const fetchMovieDetail = async () => {
+      try {
+        const response = await fetch(`https://api.themoviedb.org/3/movie/${id}?language=en-US`, {
+          method: 'GET',
+          headers: {
+            accept: 'application/json',
+            Authorization:
+            'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4OTM5NTE2MmJjNDA5MzQ2MTMyNmM5NzUyZTBkZjMzZiIsIm5iZiI6MTcyNzI1NjM4Ny41OTcyMzYsInN1YiI6IjY2Y2RkOWM2NmZkMmYwN2FiNzlkYjE3MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.n6Dhal1cf-trWSV3ewyYHw9HMouvYGBgv-pqFu3N2B0',
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        setMovie(data);
+      } catch (err) {
+        console.error('Error fetching movie details:', err);
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMovieDetail();
+  }, [id]);
+
+  if (loading) return <p className={styles.p2}>Loading...</p>;
+  if (error) return <p className={styles.p2}>Error: {error}</p>;
+  if (!movie) return <p className={styles.p2}>No movie data available.</p>;
+
+  return (
+    <div className={styles.container2}>
+      <h1 className={styles.steph1}>{movie.title}</h1>
+      <img
+        src={movie.poster_path ? `https://image.tmdb.org/t/p/w300${movie.poster_path}` : '/no-image-available.png'}
+        alt={movie.title}
+        className={styles.posteridsection}
+      />
+      <p className={styles.p2}><strong className={styles.strongidsection}>Release Date:</strong> {movie.release_date}</p>
+      <p className={styles.p2}><strong className={styles.strongidsection}>Rating:</strong> {movie.vote_average} ⭐️</p>
+      <p className={styles.p2}><strong className={styles.strongidsection}>Overview:</strong> {movie.overview}</p>
+      {/* Add more details as desired */}
+    </div>
+  );
+}

my-next-app/src/app/movies/[id]/page.module.css

@@ -0,0 +1,34 @@
+.container2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    background: linear-gradient(150deg, #001523, #003356, #001523 90%);
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    max-width: 450px;
+    margin: 0 auto;
+  }
+
+  .posteridsection {
+    width: 100%;
+    max-width: 300px;
+    height: auto;
+    border-radius: 4px;
+    margin-bottom: 20px;
+  }
+  .steph1 {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .p2 {
+    font-size: 1rem;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .strongidsection {
+    color: #ff6d00;
+  }

my-next-app/src/components/Header/Header.jsx

@@ -20,7 +20,7 @@ export default function Header() {
         📽Reel Magic📽
       </h1>
       <button
-        aria-label="Search"
+        aria-label="Open search"
         className={`${styles.searchButton} ${isSearchActive ? styles.searchActive : ''}`}
         onClick={!isSearchActive ? handleSearchClick : undefined}
       >

my-next-app/src/components/Header/Header.module.css

@@ -1,56 +1,45 @@
+/* Header.module.css */
 .header {
-  display: flex; /* Use flexbox for layout */
-  align-items: center; /* Align items vertically in the center */
-  /* justify-content: space-between; Space between title and button */
-  justify-content: flex-end; /* Initially align items to the right */
-  padding: 10px 15px; /* Add padding around the header for mobile */
+  display: flex;
+  align-items: center;
+  justify-content: space-between; /* Space between title and button */
+  padding: 10px 15px;
   background-color: #001523;
-  width: 100%; /* Set background color for visibility */
-  position: relative; /* Ensure relative positioning for search bar */
-  transition: justify-content 0.3s; /* Smooth transition for search bar */
+  width: 100%; /* Utilize full width within global max-width */
+  box-sizing: border-box;
+  height: 60px; /* Fixed height for consistency */
 }
 
 .title {
-  margin: 0; /* Remove default margin */
-  font-size: 1.2rem; /* Set font size */
-  color: #fff; /* Set text color */
+  margin: 0;
+  font-size: 1.5rem;/*CHECK WITH JAMES IF THIS OK*/
+  color: #fff;
   letter-spacing: 0.2em;
-  flex: 1; /* Allow title to take available space */
-  white-space: nowrap; /* Prevent title from wrapping to next line */
-  text-overflow: ellipsis; /* Show ellipsis for overflow text */
-  transition: opacity 0.3s;
-  display: block;
-}
-
-.title.hidden {
-  opacity: 0;
-  display: none;
+  flex: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden; /* Prevent text overflow */
 }
 
 .searchButton {
-  background: transparent; /* Make background transparent */
-  border: none; /* Remove border */
-  padding: 0; /* Remove padding to eliminate extra space */
-  cursor: pointer; /* Change cursor to pointer */
-  display: flex; /* Flexbox for alignment */
-  align-items: center; /* Center the icon vertically */
-  justify-content: center; /* Center the icon horizontally */
-  outline: none; /* Remove default outline on focus */
-  margin-left: 15px; /* Add space between title and button */
-  transition:
-    margin-left 0.3s ease,
-    transform 0.3s ease;
-  position: relative;
-  z-index: 2; /* Ensure the button stays above the search bar */
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
 }
 
 .searchButton svg {
-  width: 24px; /* Set SVG width */
-  height: 24px; /* Set SVG height */
-  transition:
-    fill 0.3s,
-    stroke 0.3s;
-  /* Smooth transition for hover effect */
+  width: 24px;
+  height: 24px;
+  transition: stroke 0.3s ease;
+}
+
+.hideSearchButton {
+  display: none; /* Hide SearchButton when SearchBar is active */
 }
 
 .iconFill {
@@ -70,9 +59,9 @@
 }
 
 .searchButton:focus {
-  /* /added to prevent the box of the button from having an outline when clicked,
+/* /added to prevent the box of the button from having an outline when clicked,
 if you want to see the button being clicked add colour etc as needed. */
-  box-shadow: none;
+  box-shadow: none
 }
 
 .searchButton:focus .iconStroke {
@@ -92,3 +81,5 @@ if you want to see the button being clicked add colour etc as needed. */
 .searchActiveHeader {
   justify-content: flex-start; /* Align items to the left */
 }
+
+