From a3783775ec729a7955bc941f789378026e45f5b7 Mon Sep 17 00:00:00 2001
From: vanessa <vanessapcbarros@gmail.com>
Date: Sat, 8 Jun 2024 10:59:55 +0200
Subject: [PATCH] feat: add skill tags

---
 src/components/{jobItem.astro => JobItem.astro} | 15 +++++++++++++--
 src/components/JobTag.astro                     | 16 ++++++++++++++++
 src/pages/work.astro                            |  8 ++++----
 3 files changed, 33 insertions(+), 6 deletions(-)
 rename src/components/{jobItem.astro => JobItem.astro} (71%)
 create mode 100644 src/components/JobTag.astro

diff --git a/src/components/jobItem.astro b/src/components/JobItem.astro
similarity index 71%
rename from src/components/jobItem.astro
rename to src/components/JobItem.astro
index 8bf13ed..0296391 100644
--- a/src/components/jobItem.astro
+++ b/src/components/JobItem.astro
@@ -1,11 +1,14 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import Markdown from "./MarkdownComponent.astro";
+import TagList from "./TagList.astro";
+import JobTag from "./JobTag.astro";
 interface Props {
   job: CollectionEntry<"work">;
 }
 
 const { job } = Astro.props;
+const tags = job.data.skills;
 const { Content } = await job.render();
 ---
 
@@ -17,6 +20,9 @@ const { Content } = await job.render();
       >
     </h3>
     <p class="dates">{job.data.dates}</p>
+    <ul>
+      {tags && tags.map((tag) => <JobTag tag={tag} />)}
+    </ul>
   </header>
 
   <Markdown>
@@ -25,7 +31,6 @@ const { Content } = await job.render();
 </article>
 
 <style scoped>
-
   .job {
     margin-bottom: var(--space-extra-large);
   }
@@ -34,12 +39,18 @@ const { Content } = await job.render();
   }
   .title {
     font-weight: bolder;
-    font-style: italic;
     margin-bottom: var(--space-xxs);
   }
   .dates {
     line-height: 1em;
     font-size: var(--font-size-4);
+    font-weight: bolder;
     color: var(--secondary-color);
+    margin-bottom: var(--space-small);
+  }
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-medium);
   }
 </style>
diff --git a/src/components/JobTag.astro b/src/components/JobTag.astro
new file mode 100644
index 0000000..2d16e67
--- /dev/null
+++ b/src/components/JobTag.astro
@@ -0,0 +1,16 @@
+---
+import { getRandomColor } from "../helpers/colorGenerator";
+const { tag } = Astro.props;
+---
+
+<li class="tag">
+  <span style={{ color: `${getRandomColor()}` }}> # </span>
+  <span class="text"> {tag} </span>
+</li>
+
+<style scoped>
+  .tag span {
+    font-style: italic;
+    font-size: var(--font-size-4);
+  }
+</style>
diff --git a/src/pages/work.astro b/src/pages/work.astro
index 9bfd27e..e4e7da8 100644
--- a/src/pages/work.astro
+++ b/src/pages/work.astro
@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content";
 import PageLayout from "../layouts/PageLayout.astro";
-import JobItem from "../components/jobItem.astro";
+import JobItem from "../components/JobItem.astro";
 
 const jobs = await getCollection("work");
 ---
@@ -45,7 +45,8 @@ const jobs = await getCollection("work");
 </PageLayout>
 <style>
   .content {
-    padding-top: var(--space-extra-large);
+    padding-top: var(--space-extra-large);  <footer></footer>
+
     margin-bottom: var(--space-xxl);
   }
   @media (min-width: 950px) {
@@ -58,7 +59,7 @@ const jobs = await getCollection("work");
   }
 
   section h2 {
-    margin-bottom: var(--space-large);
+    margin-bottom: var(--space-extra-large);
   }
 
   .values h2 {
@@ -70,5 +71,4 @@ const jobs = await getCollection("work");
     flex-wrap: wrap;
     gap: var(--space-medium);
   }
-
 </style>