Add Skeleton for GridItem and Image + Refactor components architecture with more modularity + Delete Fruit feature

src/components/Grid/DeleteItem.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <button class="delete-btn" @click="showPrompt">
+      🚮
+    </button>
+    <div v-if="openPrompt" :class="{ open: openPrompt }" class="prompt">
+      <h3>You will delete '{{ item.name }}'?</h3>
+      <div class="actions">
+        <button class="btn btn-cancel" @click="openPrompt = false">No</button>
+        <button class="btn btn-success" @click="removeFruit(item.id)">Yes</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DeleteItem",
+  props: {
+    item: Object,
+    redirect: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      openPrompt: false
+    };
+  },
+  methods: {
+    showPrompt() {
+      this.openPrompt = true;
+    },
+    removeFruit(id) {
+      this.$store.dispatch("removeFruit", id).then(() => this.redirect());
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+.prompt {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  background: rgb(230, 107, 107);
+  background: linear-gradient(90deg, rgba(230, 107, 107, 1) 0%, rgba(214, 48, 49, 1) 100%);
+  width: 0;
+  height: 0;
+  transition: all 0.4s ease-in-out;
+  color: @color-2;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+
+  &.open {
+    width: 100%;
+    height: 100%;
+  }
+
+  .btn {
+    border: none;
+    border-radius: 4px;
+    color: @color-2;
+    padding: 0.5rem 1.35rem;
+    margin: 0 0.5rem;
+  }
+
+  .btn-success {
+    background-color: #2ecc71;
+  }
+
+  .btn-cancel {
+    background-color: darken(#cecece, 15%);
+  }
+}
+
+.delete-btn {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  width: 55px;
+  padding: 0.75rem 0.75rem 1.35rem 1.35rem;
+  background: rgb(230, 107, 107);
+  background: linear-gradient(180deg, rgba(230, 107, 107, 0.6) 0%, rgba(214, 48, 49, 1) 100%);
+  border: none;
+  border-bottom-left-radius: 100%;
+}
+</style>

src/components/Grid/Grid.vue

@@ -0,0 +1,83 @@
+<template>
+  <div :class="{ error: !loading && !data.length }" class="grid">
+    <!-- Loading placeholder -->
+    <GridItemSkeleton v-if="loading" />
+    <GridItemSkeleton v-if="loading" />
+
+    <!-- Items -->
+    <GridItem v-else :key="item.id" v-for="item in data" :item="item" />
+
+    <!-- Error messages -->
+    <p v-if="!loading && !data.length" class="alert"><b>💡 Restart API</b>: 0 fruits !</p>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import GridItemSkeleton from "./GridItemSkeleton";
+import GridItem from "./GridItem";
+
+export default {
+  name: "Grid",
+  components: {
+    GridItemSkeleton,
+    GridItem
+  },
+  props: {
+    data: Array
+  },
+  computed: {
+    ...mapState(["loading"])
+  }
+};
+</script>
+
+<style scoped lang="less">
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  column-gap: 1rem;
+  row-gap: 1.5rem;
+
+  &.error {
+    display: block;
+  }
+
+  @media screen and (min-width: @md) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media screen and (min-width: @lg) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media screen and (min-width: @xl) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .alert {
+    box-sizing: border-box;
+    margin: 0 auto;
+    width: 80%;
+    background-color: @color-3;
+    color: @color-2;
+    padding: 1rem 1.5rem;
+    border-radius: 4px;
+
+    @media screen and (min-width: @sm) {
+      width: 50%;
+      max-width: 535px;
+    }
+
+    pre {
+      padding: 1rem;
+      border-radius: 4px;
+      background-color: rgb(45, 48, 55);
+
+      span {
+        color: @color-3;
+      }
+    }
+  }
+}
+</style>

src/components/Grid/GridItem.vue

@@ -0,0 +1,107 @@
+<template>
+  <article class="grid-item">
+    <DeleteItem :item="item" />
+    <router-link :to="`/fruit/${item.id}`">
+      <div class="thumbnail">
+        <img :src="item.image" :alt="item.name" />
+      </div>
+      <section>
+        <h3>
+          {{ item.name }}
+          <span class="tag" :style="{ backgroundColor: item.color }">{{ item.taste }}</span>
+        </h3>
+
+        <hr />
+
+        <p class="price">${{ item.price | noDecimal }}</p>
+      </section>
+    </router-link>
+  </article>
+</template>
+
+<script>
+import DeleteItem from "./DeleteItem";
+
+export default {
+  name: "GridItem",
+  components: { DeleteItem },
+  props: {
+    item: Object
+  },
+  filters: {
+    noDecimal(value) {
+      return parseInt(value).toFixed();
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+.grid-item {
+  position: relative;
+  z-index: 0;
+  background-color: @color-2;
+  border-radius: 10px;
+  overflow: hidden;
+
+  &:hover .thumbnail img {
+    transform: scale(1.1);
+  }
+
+  a {
+    display: block;
+    color: inherit;
+
+    .thumbnail {
+      height: 285px;
+      overflow: hidden;
+      box-shadow: 0 1px 4px 1px #d2d2f2;
+
+      img {
+        border-radius: 10px 10px 0 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        max-width: 100%;
+        transition: transform 0.4s ease-in-out;
+      }
+    }
+
+    section {
+      padding: 1.5rem 1rem;
+
+      h3 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 0.55rem;
+      }
+
+      hr {
+        width: 100px;
+        color: #cece;
+        margin: 1.35rem auto;
+      }
+
+      .tag {
+        border-radius: 25px;
+        padding: 0.35rem 0.75rem;
+        margin-left: 0.75rem;
+        color: #ffffff;
+        font-size: 14px;
+        font-weight: bold;
+        text-align: center;
+        text-transform: lowercase;
+      }
+
+      .price {
+        text-align: center;
+        margin: 0;
+        font-size: 28px;
+        font-weight: bold;
+        color: #ff9700;
+      }
+    }
+  }
+}
+</style>

src/components/Grid/GridItemSkeleton.vue

@@ -0,0 +1,26 @@
+<template>
+  <VueContentLoading
+    :style="{ backgroundColor: '#ffffff', padding: '1rem', borderRadius: '10px' }"
+    primary="#cecece"
+    :width="300"
+    :height="220"
+  >
+    <rect x="0" y="0" rx="4" ry="4" width="100%" height="100" />
+    <rect x="30" y="110" rx="4" ry="4" width="80%" height="15" />
+    <rect x="100px" y="150" width="100" height="2" />
+    <rect x="100px" y="175" rx="4" ry="4" width="100" height="35" />
+  </VueContentLoading>
+</template>
+
+<script>
+import VueContentLoading from "vue-content-loading";
+
+export default {
+  name: "GridItemSkeleton",
+  components: {
+    VueContentLoading
+  }
+};
+</script>
+
+<style lang="less"></style>