refactor [front]: socials

front/components/find-us.vue

@@ -13,13 +13,7 @@
       </a>
     </header>
     <div class="card-content">
-      <div>
+      <Socials />
-        <div class="is-flex socials">
-          <SocialsFacebook />
-          <SocialsInstagram />
-          <SocialsNewsletter />
-        </div>
-      </div>
     </div>
   </div>
 </template>

front/components/layout/NavBar.vue

@@ -33,11 +33,7 @@
               </div>
             </div>
           </div>
-          <div class="networks">
+          <Socials class="networks" vertical />
-            <SocialsFacebook />
-            <SocialsInstagram />
-            <SocialsNewsletter />
-          </div>
         </div>
         <div class="navbar-start">
           <nuxt-link

front/components/layout/footer.vue

@@ -1,9 +1,7 @@
 <template>
   <footer class="footer">
-    <div class="is-flex is-justify-content-space-around socials">
+    <div class="is-flex socials mb-5">
-      <SocialsFacebook />
+    <Socials class="mx-auto is-justify-content-space-around" />
-      <SocialsInstagram />
-      <SocialsNewsletter />
     </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>

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>