Restruct

src/components/GamesList.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="row" v-if="isLoaded">
+    <div class="col-sm-6 col-md-4 mb-5" v-for="game of games" v-bind:key="game.name">
+      <a :href="game.url">
+        <div class="item">
+          <div class="item-image">
+            <img class="item-image-main" :src="game.image" />
+            <img class="item-image-icon" :src="game.platform" />
+          </div>
+          <div class="item-details">
+            <div>
+              <h5 style="display: inline-block;">{{game.name}}</h5>
+            </div>
+            <div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+  <div class="d-flex justify-content-center" v-else>
+    <div class="spinner-border" role="status">
+      <span class="sr-only">Loading...</span>
+    </div>
+  </div>
+</template>
+
+<style>
+.spinner-border {
+  width: 3rem;
+  height: 3rem;
+}
+
+.item {
+  height: 100%;
+  background: #222;
+  border-radius: 10px;
+}
+
+.item-image {
+  display: block;
+  padding-bottom: 60%;
+  /* 60% sirky */
+  position: relative;
+}
+
+.item-image-main {
+  border-radius: 10px 10px 0 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  object-fit: cover;
+}
+
+.item-image-icon {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 30px;
+  height: auto;
+}
+
+.item-details {
+  padding: 10px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.item-counts {
+  border: 1px solid green;
+  color: green;
+  padding: 4px;
+  font-size: 12px;
+  font-weight: 600;
+}
+</style>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      isLoaded: true,
+      games: []
+    };
+  },
+  created() {
+    this.getGames();
+  },
+  methods: {
+    getGames() {
+      this.isLoaded = false;
+      axios.get("https://api.gabenparadise.com/api/data").then(response => {
+        console.log(response);
+        if (response.status === 200) {
+          this.isLoaded = true;
+          this.games = response.data;
+        }
+      });
+    }
+  }
+};
+</script>