Addd tags on projects display

src/components/home/featuresDisplay.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-    import feature from './feature.vue';
+    import feature from './libs/feature.vue';
 
     import {useI18n} from 'vue-i18n';
     const i18n = useI18n();

src/components/home/libs/projectTag.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <p>{{ title }}</p>
+  </div>
+</template>
+
+<script setup>
+
+    defineProps({
+        title:{
+            type:String,
+            required:true
+        },
+        colour:{
+            type:String,
+            required:false,
+            default:"#17a717"
+        }
+    })
+</script>
+
+<style scoped>
+    div{
+        background-color: v-bind(colour);
+        width: fit-content;
+        height: fit-content;
+        padding: 2px 16px;
+        border-radius: 8px;
+    }
+    p{
+        font-size: 1em;
+        margin:0;
+    }
+</style>

src/components/home/projects.vue

@@ -13,6 +13,9 @@
           <div class="project_picture">
             <img :src="e.picture">
           </div>
+          <div class="project_tags">
+            <projectTag v-for="(tag,indexTag) in e.tags" :key="indexTag" :title="tag.title" :colour="tag.colour"></projectTag>
+          </div>
           <div class="project_description">
             <article>
               <p>{{ e.desc }}</p>
@@ -26,6 +29,8 @@
 </template>
 
 <script setup>
+    import projectTag from './libs/projectTag.vue';
+
     const props = defineProps({
         projects:{
             type:Array,
@@ -81,11 +86,25 @@
         width: 100%;
         height: 100%;
     }
+    .project_tags{
+        width: 95%;
+        margin: auto;
+        margin-top: 10px;
+        margin-bottom: 0px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 5px;
+    }
     .project_description{
         width: 90%;
         margin: auto;
         font-size: 1.1em;
         margin-bottom: 20px;
+        margin-top: 0px;
+    }
+    .project_description p{
+        margin: 8px auto;
     }
     .project_button{
         background-color: rgb(65, 185, 61);

src/views/HomeView.vue

@@ -13,7 +13,8 @@
     desc:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis lectus, feugiat in eros sit amet, \
       venenatis euismod urna. Aliquam id porttitor erat, vitae dapibus velit. Praesent id felis tincidunt,",
     buttonText:"Oui !",
-    buttonLink:"#"
+    buttonLink:"#",
+    tags:[{title:"School", colour:"purple"}]
   }]
 </script>
 <!-- Want to config displayed text ? Have a look inside components !