Add Carousel and MovieCard components

nuxt/components/Carousel.vue

@@ -0,0 +1,49 @@
+<template>
+  <carousel
+    :perPageCustom="[
+      [320, 1],
+      [480, 2],
+      [768, 3]
+    ]"
+    :loop="true"
+    :navigationEnabled="true"
+    :paginationEnabled="false"
+    :navigationPrevLabel="arrowLeft"
+    :navigationNextLabel="arrowRight"
+  >
+    <slide v-for="movie in dataSource" :key="movie.imdbID">
+      <MovieCard :loading="loading" :movie="movie" />
+    </slide>
+  </carousel>
+</template>
+
+<script>
+import { Carousel, Slide } from "vue-carousel";
+import { mapState } from "vuex";
+import { Icon } from "ant-design-vue";
+
+export default {
+  components: { Carousel, Slide, Icon },
+  props: {
+    dataSource: {
+      type: Array,
+      default: []
+    }
+  },
+  computed: {
+    ...mapState({
+      loading: "loading"
+    })
+  },
+  data() {
+    return {
+      arrowLeft:
+        '<svg viewBox="64 64 896 896" data-icon="arrow-left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg>',
+      arrowRight:
+        '<svg viewBox="64 64 896 896" data-icon="arrow-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4z"></path></svg>'
+    };
+  }
+};
+</script>
+
+<style></style>

nuxt/components/MovieCard.vue

@@ -0,0 +1,62 @@
+<template>
+  <a-card :loading="loading" :bordered="false">
+    <a-spin class="spinner" v-if="loading" slot="cover" />
+    <img
+      v-else
+      slot="cover"
+      :alt="movie.Title"
+      :src="
+        movie.Poster == 'N/A'
+          ? 'https://placeimg.com/200/200/any?1'
+          : movie.Poster
+      "
+    />
+
+    <a-card-meta :title="movie.Title">
+      <template slot="description">
+        {{ movie.Director }} -
+        <span style="font-size: 12px; font-style: oblique;">{{
+          movie.Year
+        }}</span>
+      </template>
+    </a-card-meta>
+  </a-card>
+</template>
+
+<script>
+export default {
+  props: {
+    movie: {
+      type: Object,
+      default: () => {}
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+</script>
+
+<style>
+.spinner {
+  text-align: center;
+  background: rgba(207, 216, 220, 0.4);
+  border-radius: 4px 4px 0 0;
+  margin-bottom: 20px;
+  padding: 30px 50px;
+}
+
+.ant-card {
+  height: 100%;
+}
+
+.ant-card-cover img {
+  max-height: 256px;
+  object-fit: scale-down;
+}
+
+.ant-card-cover {
+  background-color: rgb(13, 10, 57);
+}
+</style>

nuxt/components/TheHeader.vue

@@ -42,4 +42,19 @@ h2 {
   height: 48px;
   margin: 0 12px 0 0;
 }
+
+@media screen and (max-width: 414px) {
+  .NuxtLogo {
+    width: 28px;
+    height: 28px;
+  }
+
+  h1 {
+    font-size: 18px;
+  }
+
+  h2 {
+    display: none;
+  }
+}
 </style>