From d2b7c4d93c80b60023a0f42e311c08b1d803b6c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 4 Dec 2020 03:25:28 +0100
Subject: [PATCH] Create Grid and GridItem components

---
 src/components/Grid.vue     | 27 ++++++++++++++++++++
 src/components/GridItem.vue | 51 +++++++++++++++++++++++++++++++++++++
 src/views/Fruits.vue        |  4 ++-
 3 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Grid.vue
 create mode 100644 src/components/GridItem.vue

diff --git a/src/components/Grid.vue b/src/components/Grid.vue
new file mode 100644
index 0000000..45c9f0c
--- /dev/null
+++ b/src/components/Grid.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="grid">
+    <GridItem :key="item.id" v-for="item in data" :item="item" />
+  </div>
+</template>
+
+<script>
+import GridItem from "./GridItem";
+
+export default {
+  name: "Grid",
+  components: {
+    GridItem
+  },
+  props: {
+    data: Array
+  }
+};
+</script>
+
+<style scoped lang="less">
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: 1rem;
+}
+</style>
diff --git a/src/components/GridItem.vue b/src/components/GridItem.vue
new file mode 100644
index 0000000..f95d3d5
--- /dev/null
+++ b/src/components/GridItem.vue
@@ -0,0 +1,51 @@
+<template>
+  <article class="grid-item">
+    <router-link :to="`/fruit/${item.id}`">
+      <img :src="item.image" :alt="item.name" />
+      <h2>{{ item.name }}</h2>
+      <span class="tag" :style="{ backgroundColor: item.color }">{{ item.taste }}</span>
+      <p class="price">{{ item.price + "$" }}</p>
+    </router-link>
+  </article>
+</template>
+
+<script>
+export default {
+  props: {
+    item: Object
+  }
+};
+</script>
+
+<style scoped lang="less">
+.grid-item {
+  padding: 1rem;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
+
+  h2 {
+    text-transform: capitalize;
+  }
+
+  .tag {
+    font-weight: bold;
+    text-transform: lowercase;
+    display: inline-block;
+    color: #ffffff;
+    padding: 0.35rem;
+    min-width: 85px;
+    border-radius: 25px;
+  }
+
+  img {
+    width: 100%;
+    height: 350px;
+    object-fit: cover;
+    max-width: 100%;
+  }
+
+  .price {
+    font-size: 24px;
+    font-weight: bold;
+  }
+}
+</style>
diff --git a/src/views/Fruits.vue b/src/views/Fruits.vue
index abb97c9..d486a4a 100644
--- a/src/views/Fruits.vue
+++ b/src/views/Fruits.vue
@@ -1,15 +1,17 @@
 <template>
   <div>
     <h1>Fruits Directory</h1>
-    {{ this.fruits }}
+    <Grid :data="this.fruits" />
   </div>
 </template>
 
 <script>
 import { mapState } from "vuex";
+import Grid from "@/components/Grid";
 
 export default {
   name: "Fruits",
+  components: { Grid },
   computed: {
     ...mapState(["fruits"])
   },