Added ratings page

src/pages/Actor.jsx

@@ -63,7 +63,8 @@ const Actor = () => {
 
     return (
         <div className={styles.Container}>
-            <h1>{actor?.name}</h1>
+            <hr />
+            <h1 className={styles.Name}>{actor?.name}</h1>
             <div className={styles.Section}>
                 <h2>Biography</h2>
                 <div className={styles.Description}>

src/pages/Home.jsx

@@ -47,7 +47,14 @@ const Home = () => {
 
     return (
         <div className={styles.Container}>
-            <TopBar search={search} setSearch={setSearch} />
+            <input
+                type="text"
+                className={styles.Search}
+                value={search}
+                autoFocus
+                placeholder="Search for movies..."
+                onChange={({ target }) => setSearch(target.value)}
+            />
             <div className={styles.CardList}>
                 {movies?.map((movie) => (
                     <Card key={movie.id} movie={movie} />

src/pages/Movie.jsx

@@ -93,6 +93,10 @@ const Movie = () => {
                 <div className={styles.Section}>
                     <h1 className={styles.Header}>Your Rating</h1>
                     <Rate rating={rating} setRating={setRating} />
+                    <br />
+                    <Link to="/ratings" className={styles.RatingsLink}>
+                        Go to ratings
+                    </Link>
                 </div>
                 <div className={styles.Section}>
                     <h1 className={styles.Header}>Actors</h1>

src/pages/Ratings.jsx

@@ -0,0 +1,29 @@
+import Card from "components/Card"
+import useLocalStorage from "hooks/useLocalStorage"
+import styles from "styles/Ratings.module.css"
+
+const Ratings = () => {
+    const [ratings, setRatings] = useLocalStorage("ratings", [])
+    const setRating = (rating, movie) =>
+        setRatings((currentRatings) => [
+            ...currentRatings.filter(({ id }) => id != movie.id),
+            { ...movie, rating },
+        ])
+
+    return (
+        <div className={styles.Container}>
+            <hr />
+            <div className={styles.CardList}>
+                {ratings?.map((movie) => (
+                    <Card
+                        key={movie.id}
+                        movie={movie}
+                        setRating={(rating) => setRating(rating, movie)}
+                    />
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default Ratings