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

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>