added reviews to the modals

Week-14-Props_State_Events_and_Lifecycle_Methods/src/App.css

@@ -31,5 +31,6 @@ nav{
   width: 18rem;
   padding: 2em;
   margin: 2em;
+  background-color: #61dbfb;
 }
 

Week-14-Props_State_Events_and_Lifecycle_Methods/src/App.jsx

@@ -19,6 +19,7 @@ function App() {
         title={movie.title} 
         synopsis={movie.synopsis}
         image={movie.image}
+        reviews={movie.reviewList}
         />
         ))} 
       </div>

Week-14-Props_State_Events_and_Lifecycle_Methods/src/MovieCard.jsx

@@ -1,10 +1,11 @@
-//import { useStat } from "react"
+import React, { useState } from 'react';
+//import StarRating from "./StarRating"
+import Reviews from "./Reviews"
 
-import StarRating from "./StarRating"
+export default function MovieCard( {title, synopsis, image, reviews} ){
 
-export default function MovieCard( {title, synopsis, image} ){
-
-
+  const [show, setShow] = useState(false)
+    //console.log(reviews)
     return(
       <>
 
@@ -13,9 +14,14 @@ export default function MovieCard( {title, synopsis, image} ){
           <img className="card-img-top" src={image} alt="Card image cap" />
             <div className="card-body">
               <h5 className="card-title">{title}</h5>
-              <StarRating />
+
               <p className="card-text">{synopsis}</p>
-              <a href="#" className="btn btn-primary">Leave a Review</a>
+              <div>
+              <button onClick={ () => setShow(true) }>Reviews</button>
+              <Reviews onClose={ () => setShow(false)} 
+              show={show}
+              reviews={reviews}/>
+              </div>
             </div>
         </div> 
       </div>

Week-14-Props_State_Events_and_Lifecycle_Methods/src/Review.css

@@ -0,0 +1,33 @@
+.modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    width: 500px;
+    background-color: #61dbfb;
+}
+
+.modal-header {
+    padding: 10px;
+}
+
+.modal-title {
+    margin: 0;
+
+}
+
+.modal-body {
+    padding: 10px;
+    color: #88dded;
+    background-color: #1c2c4c;
+    border-top: 1px solid #b4b7be;
+    border-bottom: 1px solid #b4b7be;
+}

Week-14-Props_State_Events_and_Lifecycle_Methods/src/Reviews.jsx

@@ -0,0 +1,33 @@
+import "./Review.css"
+import StarRating from "./StarRating";
+
+const Reviews = props => {
+    if (!props.show){
+        return null
+    }
+    const rev= props.reviews;
+
+    return (
+        <div className="modal">
+            <div className="modal-content">
+                <div className="modal-header">
+                    <h3 className="modal-title">Reviews</h3>
+                </div>
+                <div className="modal-body">
+                    {rev.map((review, index) => (
+                        <div key={index}>
+                            <h5>{review.author}</h5>
+                            <StarRating defaultRating={review.stars}/>
+                            <p>{review.review}</p> 
+                        </div>
+                    ))}
+                </div>
+                <div className="modal-footer">
+                    <button onClick={props.onClose} className="button">Close</button>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Reviews

Week-14-Props_State_Events_and_Lifecycle_Methods/src/StarRating.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+
 import PropTypes from 'prop-types';
 import "./star.css"
 

Week-14-Props_State_Events_and_Lifecycle_Methods/src/data.jsx

@@ -19,8 +19,7 @@ export const movieList = [
              id: 2,
              author: 'Jane Smith',
              stars: 4.0,
-             review:
-                'Good movie, but could have been better. Some scenes felt unnecessary.',
+             review: 'Good movie, but could have been better. Some scenes felt unnecessary.',
           },
        ],
     },