Added type for celestial bodies w/ icons

src/components/celestials/CelestialCard.vue

@@ -1,6 +1,60 @@
 <template>
   <div class="celestial-card">
-    {{ celestial.name }}
+    <div class="card-wrapper">
+      <div class="card-icon">
+        <img
+          v-if="celestial.type === 'planète à lunes'"
+          src="/icons/saturn-and-other-planets.svg"
+          alt="planet icon"
+        />
+        <img
+          v-else-if="celestial.type === 'planète'"
+          src="/icons/saturn-planet-shape.svg"
+          alt="planet icon"
+        />
+        <img
+          v-else-if="celestial.type === 'lune'"
+          src="icons/moon-and-stars-in-a-cloud.svg"
+          alt="moon icon"
+        />
+        <img
+          v-else-if="celestial.type === 'étoile'"
+          src="icons/sun-shape.svg"
+          alt="moon icon"
+        />
+        <img v-else src="icons/stars-group.svg" alt="moon icon" />
+      </div>
+
+      <div class="card-header">
+        <h3 class="heading-3">{{ celestial.name }}</h3>
+        <p>
+          Type :
+          <span class="txt-capitalize">{{ celestial.type }}</span>
+        </p>
+      </div>
+
+      <div class="card-content">
+        <div v-if="celestial.gravity">
+          <p>Facteur Gravité : {{ celestial.gravity }}</p>
+        </div>
+        <div v-if="celestial.density">
+          <p>Facteur Densité : {{ celestial.density }}</p>
+        </div>
+      </div>
+
+      <div class="card-footer" v-if="celestial.discoveredBy">
+        <p>
+          <i>
+            Ce corps céleste a été découvert par
+            {{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
+          </i>
+        </p>
+      </div>
+
+      <div class="card-actions">
+        <a href="#" class="btn btn-primary">Détails</a>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -9,8 +63,54 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "celestial-card",
+  data() {
+    return {
+      type: "unknown"
+    };
+  },
   props: {
     celestial: Object
+  },
+  mounted() {
+    console.log(this.celestial);
   }
 });
 </script>
+
+<style lang="scss" scoped>
+.celestial-card {
+  height: 100%;
+  min-height: 100%;
+  padding: 20px;
+  color: $fs-black;
+  background: rgba($white, 85%);
+  border-radius: 5px;
+
+  .card-wrapper {
+    position: relative;
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    align-items: stretch;
+
+    .card-icon {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      img {
+        max-width: 50px;
+        max-height: 50px;
+      }
+    }
+
+    > * {
+      flex: 0 1 auto;
+    }
+    .card-content {
+      flex: 1 1 auto;
+      min-height: 30px;
+    }
+  }
+}
+</style>

src/components/celestials/CelestialsList.vue

@@ -29,3 +29,16 @@ export default defineComponent({
   }
 });
 </script>
+
+<style lang="scss" scoped>
+.celestial-list {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  flex-flow: row wrap;
+  .celestial-item {
+    width: calc(33% - 15px);
+    margin-bottom: 20px;
+  }
+}
+</style>

src/views/celestials/Celestials.vue

@@ -20,12 +20,26 @@ export default defineComponent({
   components: {
     CelestialsList
   },
+
+  // Initial state
   data() {
     return {
       celestials: []
     };
   },
+
+  async mounted() {
+    // Fetches from API...
+    this.fetchBodies().then(res => {
+      // ...and add type
+      this.celestials = this.addType(res);
+    });
+  },
+
   methods: {
+    /**
+     * Fetches celestial bodies from API
+     */
     fetchBodies() {
       return axios
         .get("https://api.le-systeme-solaire.net/rest/bodies/")
@@ -36,10 +50,36 @@ export default defineComponent({
           console.log(err);
           return [];
         });
-    }
     },
-  async mounted() {
+
-    this.celestials = await this.fetchBodies();
+    /**
+     * Assign a type from the celestial object provided
+     */
+    addType(bodies: []) {
+      return bodies.filter((e: any) => {
+        // Check if element is planet
+        if (e.isPlanet) {
+          if (e.moons) {
+            e.type = "planète à lunes";
+          } else {
+            e.type = "planète";
+          }
+
+          // Check if element is moon
+        } else if (e.aroundPlanet != null) {
+          e.type = "lune";
+
+          // Check if element is star
+        } else if (e.id === "soleil") {
+          e.type = "étoile";
+
+          // ...else, body is "other"
+        } else {
+          e.type = "autre";
+        }
+        return e;
+      });
+    }
   }
 });
 </script>
@@ -47,7 +87,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .celestials {
   position: relative;
-  min-height: inherit;
+  min-height: 100%;
   padding: 25px 10%;
 
   &:after {