refactor the LayoutFooterSolutions component

components/Layout/Footer/SolutionsFooter.vue → components/Layout/Footer/Solutions.vue

@@ -4,22 +4,21 @@
       <v-row>
         <v-col cols="12">
           <h4 class="solution-title text-center">
-            Ces solutions peuvent vous intéresser
+            Ces solutions peuvent aussi vous intéresser
           </h4>
         </v-col>
       </v-row>
 
-      <v-row v-if="!hideArtistRow" class="row-artist">
+      <v-row
+        v-if="showArtist"
+        class="row-artist"
+      >
         <v-col cols="2">
           <NuxtLink to="/opentalent_artist">
             <v-img src="/images/logo/logiciels/Artist-noir.png" class="logo" />
           </NuxtLink>
         </v-col>
 
-        <!-- <v-col cols="2">
-          <h5 class="solution-name">Opentalent Artist</h5>
-        </v-col> -->
-
         <v-col cols="10">
           <!-- list v-chip-->
           <v-chip-group active-class="primary--text" column>
@@ -42,17 +41,16 @@
         </v-col>
       </v-row>
 
-      <v-row v-if="!hideManagerRow" class="row-manager">
+      <v-row
+        v-if="showManager"
+        class="row-manager"
+      >
         <v-col cols="2">
           <NuxtLink to="/opentalent_manager">
           <v-img src="/images/logo/logiciels/Manager-noir.png" class="logo" />
         </NuxtLink>
         </v-col>
 
-        <!-- <v-col cols="2">
-          <h5 class="solution-name">Opentalent Manager</h5>
-        </v-col> -->
-
         <v-col cols="10">
           <!-- list v-chip-->
           <v-chip-group active-class="primary--text" column>
@@ -72,17 +70,16 @@
         </v-col>
       </v-row>
 
-      <v-row v-if="!hideSchoolRow" class="row-school">
+      <v-row
+        v-if="showSchool"
+        class="row-school"
+      >
         <v-col cols="2">
           <NuxtLink to="/opentalent_school">
-          <v-img src="/images/logo/logiciels/School-noir.png" class="logo" />
-        </NuxtLink>
+            <v-img src="/images/logo/logiciels/School-noir.png" class="logo" />
+          </NuxtLink>
         </v-col>
 
-        <!-- <v-col cols="2">
-          <h5 class="solution-name">Opentalent Artist</h5>
-        </v-col> -->
-
         <v-col cols="10">
           <!-- list v-chip-->
           <v-chip-group active-class="primary--text" column>
@@ -114,63 +111,58 @@
   </div>
 </template>
 
-<script setup>
-import { useRoute } from "vue-router";
-
-const route = useRoute();
-
-const hideManagerRow = route.path.includes("opentalent_manager");
-const hideArtistRow = route.path.includes("opentalent_artist") || route.path.includes("formations");
-const hideSchoolRow = route.path.includes("opentalent_school") ;
+<script setup lang="ts">
+const props = defineProps({
+  showArtist: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showSchool: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showManager: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+})
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .chip-detail {
   color: #000000;
 }
+
 .chip-custom {
   color: white;
   border: 1px solid #0e2d32;
   border-radius: 3rem;
   text-transform: uppercase;
-
-  font-family: "Barlow";
+  font-family: "Barlow", serif;
   font-style: normal;
   font-weight: 500;
   font-size: 10px;
   line-height: 16px;
-
   display: flex;
   align-items: center;
   text-align: center;
   letter-spacing: 0.2em;
 }
 
-.row-artist,
-.row-school,
-.row-manager {
-  border-top: 1px solid #d1cdc7;
-
-}
-
-.solution-name {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1.5rem;
-  line-height: 1.5rem;
-  color: #0e2d32;
-}
-
 .row-artist,
 .row-school,
 .row-manager {
   display: flex;
   flex-direction: row;
   align-items: center;
+  border-top: 1px solid #d1cdc7;
 }
+
 .solution-title {
-  font-family: "Barlow";
+  font-family: "Barlow", serif;
   font-style: normal;
   font-weight: 500;
   font-size: 1.5rem;

pages/formations.vue

@@ -21,7 +21,7 @@
 
   <LayoutFAQ />
 
-  <LayoutFooterSolutionsFooter id="layout-footer" />
+  <LayoutFooterSolutions id="layout-footer" />
 
   <LayoutFooter id="layout-footer" />
 </template>

pages/opentalent_manager.vue

@@ -22,7 +22,7 @@
 
     <LayoutFAQ />
 
-    <LayoutFooterSolutionsFooter />
+    <LayoutFooterSolutions :show-manager="false" />
 
     <LayoutFooter />
   </div>

pages/opentalent_school.vue

@@ -26,7 +26,7 @@
 
     <LayoutFAQ  />
 
-    <LayoutFooterSolutionsFooter />
+    <LayoutFooterSolutions :show-school="false" />
 
     <LayoutFooter />
   </div>