Create a movie card component

.\src\components\movie\index.js

import { h, Component } from "preact";
import style from "./style";

export default ({ movie }) => {
  return (
    <div class={["card", style.movieCard].join(" ")}>
      <img
        class="card-img-top"
        src={movie.image}
        alt="Card image cap"
      />
      <div class="card-body">
        <h4 class="card-title">{movie.title}</h4>
        <p class="card-text">{movie.overview}</p>
      </div>
      <div class="card-footer text-cente">
        {movie.genres.map(genre => (
          <span
            class={["badge", "badge-pill", "badge-info", style.genreBadge].join(
              " "
            )}
          >
            {genre}
          </span>
        ))}
      </div>
    </div>
  );
};

.\src\components\movie\style.css

.movieCard {
  min-width: 250px;
  max-width: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.genreBadge {
  margin-right: 3px;
}

.\src\routes\movies\movies-presentation.js

import { h, Component } from "preact";
import style from "./style";

import Movie from "../../components/movie";

export default ({ movies }) => (
  <div class={style.movies}>
    <h2>Movies</h2>
    <div class="card-deck">
      {movies.map(movie => <Movie movie={movie} />)}
    </div>
  </div>
);