add MoviesList logic

konstantin-it-lysenko · Dec 18, 2023 · 02882e4 · 02882e4
1 parent 443a451
commit 02882e4
Showing 1 changed file with 28 additions and 0 deletions.
diff --git a/src/components/MoviesList/MoviesList.jsx b/src/components/MoviesList/MoviesList.jsx
@@ -0,0 +1,28 @@
+import defaultPoster from '../../images/default-poster.jpeg';
+import { List, Item, MovieLink, MovieTitle } from './MoviesList.styled';
+
+const MoviesList = ({ movies }) => {
+  return (
+    <List>
+      {movies.map(({ id, original_title, poster_path }) => {
+        return (
+          <Item key={id}>
+            <MovieLink to={`/movies/${id}`}>
+              <img
+                src={
+                  poster_path
+                    ? `https://image.tmdb.org/t/p/w500${poster_path}`
+                    : defaultPoster
+                }
+                alt={original_title}
+              />
+              <MovieTitle>{original_title}</MovieTitle>
+            </MovieLink>
+          </Item>
+        );
+      })}
+    </List>
+  );
+};
+
+export default MoviesList;