* Moved nuxt app to main app

components/celestials/CelestialCard.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="celestial-card">
+    <div class="card-wrapper">
+      <celestial-card-icon :type="celestial.type" />
+
+      <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-info">
+        <nuxt-link
+          :to="`/astres/${celestial.id}`"
+          class="no-style"
+        >
+          <span class="material-icons-round">info</span>
+        </nuxt-link>
+      </div>
+
+      <div class="card-content">
+        <div v-if="celestial.aroundPlanet">
+          <p>
+            Orbite autour de
+            <nuxt-link
+              :to="`/astres/${celestial.aroundPlanet.planet}`"
+              class="txt-capitalize"
+            >
+              {{ celestial.aroundPlanet.planet }}
+            </nuxt-link>
+          </p>
+        </div>
+        <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 v-if="celestial.discoveredBy" class="card-footer">
+        <p>
+          <i>
+            Ce corps céleste a été découvert par
+            {{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
+          </i>
+        </p>
+      </div>
+
+      <div class="card-actions">
+        <button
+          class="favourite no-style"
+          :class="isFav ? 'active' : ''"
+          @click="toggleFav()"
+        >
+          <span class="icon material-icons-round">favorite</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { v4 as uuidv4 } from 'uuid'
+import CelestialCardIcon from './CelestialCardIcon.vue'
+
+export default {
+  name: 'CelestialCard',
+  components: { CelestialCardIcon },
+  props: {
+    celestial: {
+      type: Object,
+      default: () => { return {} }
+    }
+  },
+
+  computed: {
+    isFav () {
+      return this.$store.getters.isFav(this.celestial.id)
+    }
+  },
+
+  methods: {
+    toggleFav () {
+      if (!this.isFav) {
+        this.$store.dispatch('toasts/pushToast', {
+          id: uuidv4(),
+          title: 'Favori ajouté',
+          message: `${this.celestial.name} a été ajouté à la liste des favoris.`,
+          category: 'valid',
+          timer: 3
+        })
+      } else {
+        this.$store.dispatch('toasts/pushToast', {
+          id: uuidv4(),
+          title: 'Favori retiré',
+          message: `${this.celestial.name} a été retiré de la liste des favoris.`,
+          category: 'valid',
+          timer: 3
+        })
+      }
+      this.$store.dispatch('toggleFav', this.celestial.id)
+    }
+  }
+}
+</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;
+
+    > * {
+      flex: 0 1 auto;
+    }
+    .card-header {
+      padding-right: 60px;
+    }
+    .card-content {
+      flex: 1 1 auto;
+      min-height: 30px;
+    }
+
+    .card-info {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+
+    .card-actions {
+      color: #afafaf;
+      .favourite {
+        .icon {
+          color: #afafaf;
+        }
+        &.active {
+          .icon {
+            position: relative;
+            display: inline-block;
+            will-change: font-size;
+            animation: toggleFavHeart 0.6s cubic-bezier(0.17, 0.89, 0.32, 1.49);
+            animation-fill-mode: forwards;
+          }
+        }
+      }
+    }
+  }
+}
+</style>