From f2d420a87a65668a6b39038837d563dd5da10ed9 Mon Sep 17 00:00:00 2001
From: Arthur Danjou <arthurdanjou@outlook.fr>
Date: Sun, 21 Mar 2021 22:31:52 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=BB=20|=20Working=20with=20Composition?=
 =?UTF-8?q?=20API=20and=20TypeScript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Skill.vue     |  7 +++--
 src/components/Work.vue      |  6 ++--
 src/components/WorkSkill.vue | 54 ++++++++++++++++++++++++++++++++++++
 3 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 src/components/WorkSkill.vue

diff --git a/src/components/Skill.vue b/src/components/Skill.vue
index 568ce9c..b3f67df 100644
--- a/src/components/Skill.vue
+++ b/src/components/Skill.vue
@@ -2,7 +2,7 @@
   <div class="mb-3 mr-2 p-1 md:p-2 h-32 w-32 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="getColor">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
-        <img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">
+        <img class="rounded-sm" alt="Skill Img" :src="getCoverLink">
       </div>
       <h1 class="md:text-lg text-md font-bold text-center">{{ skill }}</h1>
     </div>
@@ -36,8 +36,11 @@ export default {
   },
   setup(props: SkillProp) {
     const getColor = computed(() => `hover:bg-${props.color}-400`)
+    const getCoverLink = computed(() => require(`@/assets/images/skills/${props.cover}.png`))
+
     return {
-      getColor
+      getColor,
+      getCoverLink
     }
   }
 }
diff --git a/src/components/Work.vue b/src/components/Work.vue
index 5c7fa47..1206057 100644
--- a/src/components/Work.vue
+++ b/src/components/Work.vue
@@ -3,7 +3,7 @@
        :class="getColor">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div class="text-center">
-        <img alt="Project Img" class="rounded-md" width="150" :src="require(`@/assets/img/works/${cover}.png`)">
+        <img alt="Project Img" class="rounded-md" width="150" :src="getCoverLink">
       </div>
       <div class="text-center">
         <h1 class="md:text-2xl text-lg font-bold">{{ title }}</h1>
@@ -46,10 +46,12 @@ export default {
   setup(props: WorkProp) {
     const formatLink = computed(() => props.url.replace('https://', '').replace('http://', ''))
     const getColor = computed(() => `hover:bg-${props.color}-600`)
+    const getCoverLink = computed(() => `@/assets/images/works/${props.cover}.png`)
 
     return {
       formatLink,
-      getColor
+      getColor,
+      getCoverLink
     }
   }
 }
diff --git a/src/components/WorkSkill.vue b/src/components/WorkSkill.vue
new file mode 100644
index 0000000..33408ec
--- /dev/null
+++ b/src/components/WorkSkill.vue
@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="m-2 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25"
+    :class="getColor"
+  >
+    <div class="w-full h-full flex flex-col justify-center items-center">
+      <div>
+        <img class="rounded-sm" alt="Skill Img" :src="getCoverLink">
+      </div>
+      <h1 class="md:text-xl text-lg font-bold text-center">{{ skill }}</h1>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed } from '@nuxtjs/composition-api'
+
+interface WorkSkillProp {
+  skill: string,
+  color: string,
+  cover: string
+}
+
+export default {
+  name: "WorkSkill",
+  props: {
+    skill: {
+      type: String,
+      default: "Rien"
+    },
+    color: {
+      type: String,
+      default: "red-100"
+    },
+    cover: {
+      type: String,
+      default: "logo.jpg"
+    }
+  },
+  setup(props: WorkSkillProp) {
+    const getColor = computed(() => `hover:bg-${props.color}-600`)
+    const getCoverLink = computed(() => require(`@/assets/images/skills/${props.cover}.png`))
+
+    return {
+      getColor,
+      getCoverLink
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>