refactor comparative table of the artist page

components/Common/Table/Comparatif.vue

@@ -1,20 +1,22 @@
 <template>
   <LayoutContainer>
-    <v-row class="row-custom">
-      <table class="table-comparatif">
+    <v-row>
+      <table>
         <thead>
           <tr>
-            <th class="thead" />
-            <th class="thead">
-              <p class="standard" :style="{ color: color }">Standard</p>
+            <th/>
+
+            <th>
+              <p class="standard">Standard</p>
               <p class="from">À partir de</p>
               <p class="price">
                 {{ standardPrice }} <span class="ttc">ttc</span>
               </p>
               <p class="month">/mois</p>
             </th>
-            <th class="thead premium-column">
-              <p class="standard" :style="{ color: color }">Premium</p>
+
+            <th class="premium-column">
+              <p class="standard">Premium</p>
               <p class="from">À partir de</p>
               <p class="price">
                 {{ premiumPrice }} <span class="ttc">ttc</span>
@@ -23,43 +25,52 @@
             </th>
           </tr>
         </thead>
-        <tbody class="table-body">
+
+        <tbody>
           <tr
-            v-for="(row, index) in tableData"
-            :key="row.id"
-            class="table-row"
-            :style="{
-              backgroundColor: index % 2 !== 0 ? stripeColor : 'white',
-            }"
+            v-for="(item, index) in items"
+            :key="item.label"
           >
-            <td class="table-data-left">{{ row.column1 }}</td>
-            <td class="table-data-second">
+            <td class="label-column">
+              {{ item.label }}
+            </td>
+
+            <td>
               <v-icon
-                v-if="row.column2 === 'check'"
+                v-if="item.includedInStandard === true"
+                icon="far fa-check-circle"
                 size="18"
-                class="far fa-check-circle"
               />
+
               <v-icon
-                v-else-if="row.column2 === 'cross'"
+                v-else-if="item.includedInStandard === false"
+                icon="far fa-times-circle"
                 size="18"
-                class="far fa-times-circle"
                 color="red"
               />
-              <span v-else>{{ row.column2 }}</span>
+
+              <span v-else>
+                {{ item.includedInStandard }}
+              </span>
             </td>
-            <td class="table-data-second">
+
+            <td>
               <v-icon
-                v-if="row.column3 === 'check'"
+                v-if="item.includedInPremium === true"
+                icon="far fa-check-circle"
                 size="18"
-                class="far fa-check-circle"
               />
+
               <v-icon
-                v-else-if="row.column3 === 'cross'"
+                v-else-if="item.includedInPremium === false"
+                icon="far fa-times-circle"
                 size="18"
-                class="far fa-times-circle"
                 color="red"
               />
-              <span v-else>{{ row.column3 }}</span>
+
+              <span v-else>
+                {{ item.includedInPremium }}
+              </span>
             </td>
           </tr>
         </tbody>
@@ -68,8 +79,9 @@
   </LayoutContainer>
 </template>
 
-<script setup>
-import { ref } from "vue";
+<script setup lang="ts">
+
+import { ComparisonItem } from "~/types/interface";
 
 const props = defineProps({
   standardPrice: {
@@ -80,27 +92,69 @@ const props = defineProps({
     type: String,
     default: "46,20€",
   },
-  color: {
-    type: String,
-    default: "#0e2d32", 
-  },
-  stripeColor: {
-    type: String,
-    default: "rgba(32, 147, 190, 0.2)", 
-  },
-  tableData: {
-    type: Array,
-    default: () => [],
-  },
+  items: {
+    type: Array as PropType<Array<ComparisonItem>>,
+    required: true
+  }
 });
 </script>
-<style scoped>
 
-.table-data-second {
+<style scoped lang="scss">
+.v-row {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 90%;
+}
+
+table {
+  width: 70%;
+  margin-top: 1rem;
+  margin-right: auto;
+  margin-left: auto;
+  border: none;
+  border-collapse: collapse;
+}
+
+th {
+  height: 8rem;
+  font-family: "Barlow", serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 30px;
+  line-height: 34px;
+}
+
+tr {
+  height: 3rem;
+  text-align: center;
+}
+
+tbody tr:nth-child(even) {
+  background-color: var(--secondary-color);
+}
+
+td {
   padding-right: 5rem;
 }
+
+td:first-child {
+  text-align: left;
+  padding-left: 20px;
+  font-family: "Barlow", serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--on-neutral-color-alt);
+}
+
 .standard {
-  font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
   font-size: 12px;
@@ -108,20 +162,18 @@ const props = defineProps({
   text-align: center;
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  color: #0e2d32;
+  color: var(--primary-color);
   padding-right: 5rem;
   margin-bottom: 1rem;
 }
 
 .from,
 .ttc {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 12px;
   line-height: 14px;
   text-align: center;
-  color: #454545;
+  color: var(--on-neutral-color-alt);
   padding-right: 5rem;
 }
 
@@ -131,67 +183,13 @@ const props = defineProps({
 
 .price,
 .month {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 400;
   font-size: 30px;
   line-height: 34px;
   text-align: center;
-  color: #454545;
+  color: var(--on-neutral-color-alt);
 }
 
 .month {
   padding-right: 5rem;
 }
-
-.table-data-left {
-  text-align: left;
-  padding-left: 20px;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: #454545;
-}
-.table-data {
-  text-align: left;
-  padding-left: 20px;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: #454545;
-}
-
-.thead {
-  background-color: #fff;
-  height: 8rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 30px;
-  line-height: 34px;
-}
-.table-comparatif {
-  width: 70%;
-  margin-top: 1rem;
-  margin-right: auto;
-  margin-left: auto;
-  border: none;
-  border-collapse: collapse;
-}
-
-
-.table-body .table-row:nth-child(odd) {
-  background-color: rgba(190, 32, 77, 0.2);
-}
-
 </style>

components/Layout/UI/Title.vue

@@ -1,6 +1,10 @@
 <!-- Titre H2 -->
 <template>
   <LayoutContainer>
+    <!--
+    TODO: dans les faits c'est plutôt le sous-titre (même s'il apparait en plus gros)
+    voir à passer en H3, ou même en autre chose qu'un titre
+    -->
     <h2>
       <slot />
     </h2>

components/Logiciels/Artist/Comparatif.vue

@@ -10,97 +10,85 @@
       </LayoutUITitle>
 
       <CommonTableComparatif
-        :standardPrice="'14€'"
-        :premiumPrice="'18€'"
+        standardPrice="14€"
+        premiumPrice="18€"
+        :items="comparisonItems"
         :color="'#0e2d32'"
         :stripeColor="'#fac20a33'"
-        :tableData="tableData"
       />
     </LayoutContainer>
   </AnchoredSection>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { ComparisonItem } from "~/types/interface";
 
-const tableData = [
+const comparisonItems: Array<ComparisonItem> = [
   {
-    id: 1,
-    column1: "GESTION DU RÉPERTOIRE",
-    column2: "check",
-    column3: "check",
+    label: "GESTION DU RÉPERTOIRE",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 2,
-    column1: "AGENDA",
-    column2: "check",
-    column3: "check",
+    label: "AGENDA",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 4,
-    column1: "GESTION DU PARC MATÉRIEL",
-    column2: "check",
-    column3: "check",
+    label: "GESTION DU PARC MATÉRIEL",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 5,
-    column1: "COMMUNICATION",
-    column2: "cross",
-    column3: "check",
+    label: "COMMUNICATION",
+    includedInStandard: false,
+    includedInPremium: true,
   },
   {
-    id: 6,
-    column1: "SMS",
-    column2: "Option",
-    column3: "Option",
+    label: "SMS",
+    includedInStandard: "Option",
+    includedInPremium: "Option",
   },
   {
-    id: 6,
-    column1: "NOM DE DOMAINE",
-    column2: "Option",
-    column3: "Option",
+    label: "NOM DE DOMAINE",
+    includedInStandard: "Option",
+    includedInPremium: "Option",
   },
   {
-    id: 7,
-    column1: "SITE INTERNET",
-    column2: "check",
-    column3: "check",
+    label: "SITE INTERNET",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 8,
-    column1: "STATISTIQUES",
-    column2: "check",
-    column3: "check",
+    label: "STATISTIQUES",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 9,
-    column1: "FONCTIONNALITÉ DU RÉSEAU CMF",
-    column2: "check",
-    column3: "check",
+    label: "FONCTIONNALITÉ DU RÉSEAU CMF",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 10,
-    column1: "SAUVEGARDE",
-    column2: "check",
-    column3: "check",
+    label: "SAUVEGARDE",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 11,
-    column1: "EXTRANET UTILISATEURS",
-    column2: "75 comptes",
-    column3: "150 comptes",
+    label: "EXTRANET UTILISATEURS",
+    includedInStandard: "75 comptes",
+    includedInPremium: "150 comptes",
   },
   {
-    id: 15,
-    column1: "ESPACE DE STOCKAGE",
-    column2: "100 Mo",
-    column3: "1 Go",
+    label: "ESPACE DE STOCKAGE",
+    includedInStandard: "100 Mo",
+    includedInPremium: "1 Go",
   },
   {
-    id: 16,
-    column1: "PAGE DU SITE INTERNET",
-    column2: "Restreint",
-    column3: "Illimités",
+    label: "PAGE DU SITE INTERNET",
+    includedInStandard: "Restreint",
+    includedInPremium: "Illimités",
   },
 ];
 </script>

components/Logiciels/School/Comparatif.vue

@@ -15,7 +15,7 @@
         :premiumPrice="'46,20€'"
         :color="'#0e2d32'"
         :stripeColor="'rgba(32, 147, 190, 0.2)'"
-        :tableData="tableData"
+        :items="tableData"
       />
     </LayoutContainer>
   </div>

types/interface.d.ts

@@ -71,3 +71,9 @@ interface Functionality {
   list: Array<string>,
   options?: Array<string>,
 }
+
+interface ComparisonItem {
+  label: string,
+  includedInStandard: boolean | string,
+  includedInPremium: boolean | string,
+}