+ Added link to toast card

assets/scss/_global.scss

@@ -63,6 +63,13 @@ a {
     color: inherit;
     text-decoration: none;
   }
+  &.fs-link {
+    color: $primary-xxlight;
+    text-decoration: underline;
+    &:hover {
+      color: $primary-xlight;
+    }
+  }
 }
 
 button {

components/celestials/CelestialCard.vue

@@ -91,6 +91,10 @@ export default {
           id: uuidv4(),
           title: 'Favori ajouté',
           message: `${this.celestial.name} a été ajouté à la liste des favoris.`,
+          link: {
+            text: 'Consultez vos favoris.',
+            url: '/favoris'
+          },
           category: 'valid',
           timer: 3
         })
@@ -99,6 +103,10 @@ export default {
           id: uuidv4(),
           title: 'Favori retiré',
           message: `${this.celestial.name} a été retiré de la liste des favoris.`,
+          link: {
+            text: 'Consultez vos favoris.',
+            url: '/favoris'
+          },
           category: 'valid',
           timer: 3
         })

components/toast/ToastCard.vue

@@ -6,6 +6,9 @@
     <div class="toast-message">
       <slot name="message" />
     </div>
+    <div class="toast-link">
+      <slot name="link" />
+    </div>
   </div>
 </template>
 
@@ -62,11 +65,23 @@ export default defineComponent({
   animation: fadeIn 1s cubic-bezier(0.175, 1, 0.32, 1),
     slideFromRight 1s cubic-bezier(0.175, 1, 0.32, 1);
   overflow: hidden;
+
   .toast-title {
     margin-bottom: 5px;
     font-size: 16px;
     font-weight: $fw-bold;
   }
+
+  .toast-link {
+    a {
+      color: $primary-xxlight;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
   &:after {
     position: absolute;
     display: block;
@@ -78,6 +93,7 @@ export default defineComponent({
     height: 6px;
     background: rgba($fs-black, 33%);
   }
+
   &.info {
     background-color: $info;
   }
@@ -91,6 +107,7 @@ export default defineComponent({
   &.danger {
     background-color: $danger;
   }
+
   &.closing {
     animation: fadeOut 1.2s cubic-bezier(0.175, 1, 0.32, 1),
       slideFromLeft 1.2s cubic-bezier(0.175, 1, 0.32, 1);

components/toast/ToastsList.vue

@@ -8,6 +8,11 @@
         <template #message>
           {{ toast.message }}
         </template>
+        <template #link>
+          <nuxt-link :to="toast.link.url">
+            {{ toast.link.text }}
+          </nuxt-link>
+        </template>
       </toast-card>
     </div>
   </div>

pages/astres/_slug.vue

@@ -8,6 +8,7 @@
           <span class="txt-capitalize">- {{ celestial.type }}</span>
         </h1>
       </header>
+
       <div class="section-content">
         <div class="celestial-body">
           <div>
@@ -18,11 +19,12 @@
               Orbite autour de
               <nuxt-link
                 :to="`/astres/${celestial.aroundPlanet.planet}`"
-                class="txt-capitalize"
+                class="txt-capitalize fs-link"
               >
                 {{ celestial.aroundPlanet.planet }}
               </nuxt-link>
             </p>
+
             <p v-if="celestial.discoveredBy">
               Découvert par {{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
             </p>
@@ -30,10 +32,12 @@
             <p>Facteur Densité : {{ celestial.density }}</p>
             <p>Inclinaison : {{ celestial.inclination }}</p>
           </div>
+
           <div v-if="celestial.moons" class="celestial-moons">
             <h2 class="heading-2">
               Astres orbitant {{ celestial.name }}
             </h2>
+
             <celestials-list :celestials="celestial.moons" :has-filters="false" />
           </div>
         </div>
@@ -78,15 +82,5 @@ export default {
   &:after {
     background-image: url("/celestials_bg-min.jpg");
   }
-
-  .celestial-body {
-    a {
-      color: $primary-xxlight;
-      text-decoration: underline;
-      &:hover {
-        color: $primary-xlight;
-      }
-    }
-  }
 }
 </style>