Composición de Lista de películas

block-buster/css/styles.css

@@ -69,13 +69,13 @@ body {
   border-radius: .5em;
 } */
 
-.movie-list {
+/* .movie-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, 200px);
   justify-content: center;
   box-sizing: border-box;
   gap: 1em;
-}
+} */
 
 
 .movie {

block-buster/src/components/app.js

@@ -4,6 +4,7 @@ import Header from './header.js'
 import Actions from './actions.js'
 import Search from './search.js'
 import Filters from './filters.js'
+import MovieList from './movie-list.js'
 
 const AppStyled = styled.div``
 
@@ -17,7 +18,8 @@ class App extends Component {
             new Search(),
             new Filters(),
           ]
-        })
+        }),
+        new MovieList()
       ]
     })
   }

block-buster/src/components/movie-list.js

@@ -0,0 +1,25 @@
+import { Component } from '../lib/react/index.js'
+import styled from '../lib/styled-components.js'
+import Wrapper from './wrapper.js'
+import Movie from './movie.js'
+import movies from '../movies.js'
+
+const MovieListStyled = styled.section`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 200px);
+  justify-content: center;
+  box-sizing: border-box;
+  gap: 1em;
+`
+
+class MovieList extends Component {
+  render() {
+    return Wrapper({
+      children: MovieListStyled({
+        children: movies.map(movie => new Movie(movie))
+      })
+    })
+  }
+}
+
+export default MovieList

block-buster/src/components/movie.js

@@ -0,0 +1,27 @@
+import { Component, createElement } from '../lib/react/index.js'
+
+class Movie extends Component {
+  render() {
+    const { poster_path, title, id, vote_average } = this.props
+    return createElement('article', {
+      class: `movie ${vote_average >= 7 ? 'recommended': ''}`,
+      children: [
+        createElement('img', {
+          class: 'movie-poster',
+          src: `//image.tmdb.org/t/p/w220_and_h330_face${poster_path}`
+        }),
+        createElement('p', {
+          class: 'movie-title',
+        }, title),
+        createElement('p', {
+          class: 'movie-id',
+        }, id),
+        createElement('span', {
+          class: 'movie-rate',
+        }, vote_average)
+      ]
+    })
+  }
+}
+
+export default Movie

block-buster/src/lib/styled-components.js

@@ -14,6 +14,7 @@ const elements = [
   'input',
   'button',
   'select',
+  'section',
 ]
 
 function buildStyles(strings, dynamicValues, props) {