Create Contributors page

src/App.vue

@@ -41,8 +41,6 @@ body {
   color: var(--smoky_dark);
   display: flex;
   flex-direction: column;
-  width: 100vw;
-  height: 100vh;
 }
 
 .app-container {

src/components/Leaves/Leave.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="leaf" v-bind:class="team"></div>
+</template>
+
+<script>
+export default {
+  props: ['team'],
+};
+</script>
+
+<style scoped>
+.leaf {
+  float: left;
+  width: 15px;
+  height: 28px;
+  margin-right: 8px;
+  border-radius: 15px 0 15px 0;
+  background-color: #bbb;
+}
+
+.frontend {
+  background-color: rgb(26, 103, 92);
+}
+.backend {
+  background-color: rgb(40, 107, 179);
+}
+.devops {
+  background-color: rgb(145, 15, 25);
+}
+.design {
+  background-color: rgb(229, 0, 25);
+}
+.planning {
+  background-color: rgb(248, 129, 10);
+}
+.functional_testing {
+  background-color: rgb(247, 171, 0);
+}
+</style>

src/components/Leaves/Leaves.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="leaves">
+    <Leave v-for="team in teamNames" v-bind:key="teamNames.indexOf(team)" :team="team"></Leave>
+  </div>
+</template>
+
+<script>
+import Leave from './Leave.vue';
+
+export default {
+  name: 'Leaves',
+  components: {
+    Leave,
+  },
+  computed: {
+    teamNames() {
+      return this.teams.map(team => {
+        if (team === 0) return 'planning';
+        if (team === 1) return 'design';
+        if (team === 2) return 'frontend';
+        if (team === 3) return 'backend';
+        if (team === 4) return 'devops';
+        return 'functional_testing';
+      });
+    },
+  },
+  props: ['teams'],
+};
+</script>

src/router.js

@@ -3,7 +3,7 @@ import Router from 'vue-router';
 import History from './views/History.vue';
 import FAQPage from './views/FAQPage/index.vue';
 import Videos from './views/Videos.vue';
-import Contributors from './views/Contributors.vue';
+import Contributors from './views/ContributorsPage/Contributors.vue';
 
 Vue.use(Router);
 

src/views/ContributorsPage/Contributor.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="contributor">
+    <img v-bind:src="data.attributes.image" class="profile" />
+    <span>{{ data.attributes.name }}</span>
+    <Leaves :teams="data.attributes.teamIds" />
+    <br />
+    <p>
+      <a v-bind:href="`https://github.com/${data.attributes.username}`">
+        <i class="fa fa-github-square"></i>
+        <span>{{ data.attributes.username }}</span>
+      </a>
+    </p>
+    <hr />
+  </div>
+</template>
+
+<script>
+import Leaves from '../../components/Leaves/Leaves.vue';
+
+export default {
+  name: 'Contributor',
+  components: {
+    Leaves,
+  },
+  props: ['data'],
+};
+</script>
+
+<style scoped>
+@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
+@import url('../../assets/main.css');
+
+.profile {
+  width: var(--width_height);
+  height: var(--width_height);
+  border-radius: 50%;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+}
+</style>

src/views/ContributorsPage/ContributorList.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="contributors">
+    <div class="contributor" v-for="contributor in contributors" :key="contributor.id">
+      <Contributor :data="contributor" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Contributor from './Contributor.vue';
+
+export default {
+  name: 'ContributorList',
+  data() {
+    return {
+      contributors: [],
+    };
+  },
+  created() {
+    return (
+      fetch('https://api-dev.codinggarden.community/contributors')
+        .then(res => res.json())
+        // eslint-disable-next-line
+        .then(json => (this.contributors = json))
+    );
+  },
+  components: {
+    Contributor,
+  },
+};
+</script>
+
+<style scoped></style>

src/views/ContributorsPage/Contributors.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    Contributors page
+    <ContributorsList />
+  </div>
+</template>
+
+<script>
+import ContributorsList from './ContributorList.vue';
+
+export default {
+  name: 'contributors',
+  components: {
+    ContributorsList,
+  },
+};
+</script>