From b86176949f6506ee0e5abc7e37c46ca709e608e5 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Sun, 4 Dec 2022 03:13:25 +0100
Subject: [PATCH] refactor [front]: socials

---
 front/components/find-us.vue       |  8 +-------
 front/components/layout/NavBar.vue |  6 +-----
 front/components/layout/footer.vue |  8 ++------
 front/components/socials/index.vue | 13 +++++++++++++
 4 files changed, 17 insertions(+), 18 deletions(-)
 create mode 100644 front/components/socials/index.vue

diff --git a/front/components/find-us.vue b/front/components/find-us.vue
index 276b23d..bfa9517 100644
--- a/front/components/find-us.vue
+++ b/front/components/find-us.vue
@@ -13,13 +13,7 @@
       </a>
     </header>
     <div class="card-content">
-      <div>
-        <div class="is-flex socials">
-          <SocialsFacebook />
-          <SocialsInstagram />
-          <SocialsNewsletter />
-        </div>
-      </div>
+      <Socials />
     </div>
   </div>
 </template>
diff --git a/front/components/layout/NavBar.vue b/front/components/layout/NavBar.vue
index af5490c..15f5a96 100644
--- a/front/components/layout/NavBar.vue
+++ b/front/components/layout/NavBar.vue
@@ -33,11 +33,7 @@
               </div>
             </div>
           </div>
-          <div class="networks">
-            <SocialsFacebook />
-            <SocialsInstagram />
-            <SocialsNewsletter />
-          </div>
+          <Socials class="networks" vertical />
         </div>
         <div class="navbar-start">
           <nuxt-link
diff --git a/front/components/layout/footer.vue b/front/components/layout/footer.vue
index fb2cd5a..944cca8 100644
--- a/front/components/layout/footer.vue
+++ b/front/components/layout/footer.vue
@@ -1,9 +1,7 @@
 <template>
   <footer class="footer">
-    <div class="is-flex is-justify-content-space-around socials">
-      <SocialsFacebook />
-      <SocialsInstagram />
-      <SocialsNewsletter />
+    <div class="is-flex socials mb-5">
+    <Socials class="mx-auto is-justify-content-space-around" />
     </div>
     <div class="is-flex is-justify-content-center links">
       <a href="https://git.eleves.ens.fr/klub-dev-ens/cineclub">Code source</a>
@@ -18,8 +16,6 @@
 .footer
   background-color: $grey-lightest
 
-  .socials
-    margin: 0 300px 2rem 300px
   .links :not(:first-child)
     margin-left: 2rem
 </style>
diff --git a/front/components/socials/index.vue b/front/components/socials/index.vue
new file mode 100644
index 0000000..c2d4baf
--- /dev/null
+++ b/front/components/socials/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div :class="{ 'is-flex is-flex-wrap-wrap': !vertical }">
+    <SocialsFacebook />
+    <SocialsInstagram />
+    <SocialsNewsletter />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  vertical: { default: false, type: Boolean },
+})
+</script>