From 2908bd3585d8b3bf83c9af8bc8d39c8a003af52d Mon Sep 17 00:00:00 2001
From: LJ5O <75009579+LJ5O@users.noreply.github.com>
Date: Tue, 25 Mar 2025 20:34:00 +0100
Subject: [PATCH] Addd tags on projects display

---
 src/components/home/featuresDisplay.vue    |  2 +-
 src/components/home/{ => libs}/feature.vue |  0
 src/components/home/libs/projectTag.vue    | 34 ++++++++++++++++++++++
 src/components/home/projects.vue           | 19 ++++++++++++
 src/views/HomeView.vue                     |  3 +-
 5 files changed, 56 insertions(+), 2 deletions(-)
 rename src/components/home/{ => libs}/feature.vue (100%)
 create mode 100644 src/components/home/libs/projectTag.vue

diff --git a/src/components/home/featuresDisplay.vue b/src/components/home/featuresDisplay.vue
index bf1b861..8dec61b 100644
--- a/src/components/home/featuresDisplay.vue
+++ b/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();
diff --git a/src/components/home/feature.vue b/src/components/home/libs/feature.vue
similarity index 100%
rename from src/components/home/feature.vue
rename to src/components/home/libs/feature.vue
diff --git a/src/components/home/libs/projectTag.vue b/src/components/home/libs/projectTag.vue
new file mode 100644
index 0000000..f36333a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/home/projects.vue b/src/components/home/projects.vue
index e6b272c..1615470 100644
--- a/src/components/home/projects.vue
+++ b/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);
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 9a2a546..f94976f 100644
--- a/src/views/HomeView.vue
+++ b/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 !