From 62621587d7bb45286095258fd485e51bde88ce06 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 25 Aug 2021 12:49:34 +0200
Subject: [PATCH] Move social links in a component

---
 src/components/Footer.vue     | 33 ++---------------------------
 src/components/SideMenu.vue   | 40 ++---------------------------------
 src/components/SocialList.vue | 40 +++++++++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 69 deletions(-)
 create mode 100644 src/components/SocialList.vue

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 1501fd3..68198e3 100755
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -16,26 +16,7 @@
               </nuxt-link>
             </div>
           </div>
-          <div class="social-links flex space-x-4 mb-8">
-            <a target="_blank" href="https://twitter.com/ArthurDanj" rel="noopener noreferrer">
-              <TwitterIcon />
-            </a>
-            <a target="_blank" href="https://github.com/ArthurDanjou" rel="noopener noreferrer">
-              <GithubIcon />
-            </a>
-            <a target="_blank" href="https://www.polywork.com/arthurdanjou" rel="noopener noreferrer">
-              <PolyworkIcon />
-            </a>
-            <a target="_blank" href="https://www.twitch.tv/arthurdanjou" rel="noopener noreferrer">
-              <TwitchIcon />
-            </a>
-            <a target="_blank" href="https://discord.gg/ENG6cFQhPS" rel="noopener noreferrer">
-              <DiscordIcon />
-            </a>
-            <a target="_blank" href="mailto:contact@arthurdanjou.fr" rel="noopener noreferrer">
-              <MailIcon />
-            </a>
-          </div>
+          <SocialList class="flex space-x-4 mb-8" />
         </div>
         <div class="lg:ml-32 lg:w-1/3">
           <h1 class="font-bold mb-4 text-lg underline">
@@ -109,7 +90,7 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent, ref, useAsync, useContext, useRouter, useStore} from "@nuxtjs/composition-api";
+import {computed, defineComponent, ref, useAsync, useContext, useStore} from "@nuxtjs/composition-api";
 import {State} from "~/types/types";
 
 export default defineComponent({
@@ -167,16 +148,6 @@ export default defineComponent({
     @apply text-indigo-600;
   }
 
-  .social-links a {
-    svg {
-      @apply h-6 w-6 duration-300
-    }
-
-    &:hover svg {
-      @apply transform hover:scale-120
-    }
-  }
-
   .link a {
     @apply duration-500 border-b-2 border-transparent;
 
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 0ca6222..f8cacfe 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -77,40 +77,14 @@
             </div>
           </div>
         </div>
-        <div class="social-links flex justify-between space-x-0.5">
-          <a target="_blank" href="https://twitter.com/ArthurDanj" rel="noopener noreferrer">
-            <TwitterIcon />
-          </a>
-          <a target="_blank" href="https://github.com/ArthurDanjou" rel="noopener noreferrer">
-            <GithubIcon />
-          </a>
-          <a target="_blank" href="https://www.polywork.com/arthurdanjou" rel="noopener noreferrer">
-            <PolyworkIcon />
-          </a>
-          <a target="_blank" href="https://www.twitch.tv/arthurdanjou" rel="noopener noreferrer">
-            <TwitchIcon />
-          </a>
-          <a target="_blank" href="https://discord.gg/ENG6cFQhPS" rel="noopener noreferrer">
-            <DiscordIcon />
-          </a>
-          <a target="_blank" href="mailto:contact@arthurdanjou.fr" rel="noopener noreferrer">
-            <MailIcon />
-          </a>
-        </div>
+        <SocialList class="flex justify-between space-x-0.5" />
       </nav>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  useAsync,
-  useContext,
-  useRouter,
-  useStore
-} from "@nuxtjs/composition-api";
+import {computed, defineComponent, useAsync, useContext, useRouter, useStore} from "@nuxtjs/composition-api";
 import {State} from "~/types/types";
 
 export default defineComponent({
@@ -175,14 +149,4 @@ export default defineComponent({
 .link-active a {
   @apply text-indigo-600;
 }
-
-.social-links a {
-  svg {
-    @apply h-6 w-6 duration-300
-  }
-
-  &:hover svg {
-    @apply transform hover:scale-120
-  }
-}
 </style>
diff --git a/src/components/SocialList.vue b/src/components/SocialList.vue
new file mode 100644
index 0000000..8cc2c61
--- /dev/null
+++ b/src/components/SocialList.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="social-links">
+    <a target="_blank" href="https://twitter.com/ArthurDanj" rel="noopener noreferrer">
+      <TwitterIcon />
+    </a>
+    <a target="_blank" href="https://github.com/ArthurDanjou" rel="noopener noreferrer">
+      <GithubIcon />
+    </a>
+    <a target="_blank" href="https://www.polywork.com/arthurdanjou" rel="noopener noreferrer">
+      <PolyworkIcon />
+    </a>
+    <a target="_blank" href="https://www.twitch.tv/arthurdanjou" rel="noopener noreferrer">
+      <TwitchIcon />
+    </a>
+    <a target="_blank" href="https://go.arthurdanjou.fr/discord" rel="noopener noreferrer">
+      <DiscordIcon />
+    </a>
+    <a target="_blank" href="mailto:contact@arthurdanjou.fr" rel="noopener noreferrer">
+      <MailIcon />
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SocialList"
+}
+</script>
+
+<style lang="scss">
+.social-links a {
+  svg {
+    @apply h-6 w-6 duration-300
+  }
+
+  &:hover svg {
+    @apply transform hover:scale-120
+  }
+}
+</style>