Add Socials component to avoid code duplication

src/components/Footer.astro

@@ -3,6 +3,7 @@ import socialIcons from "@assets/socialIcons";
 import { SOCIALS } from "src/config";
 import Hr from "./Hr.astro";
 import LinkButton from "./LinkButton.astro";
+import Socials from "./Socials.astro";
 
 const currentYear = new Date().getFullYear();
 
@@ -16,19 +17,7 @@ const { noMarginTop = false } = Astro.props;
 <footer class={`${noMarginTop ? "" : "mt-auto"}`}>
   <Hr noPadding />
   <div class="footer-wrapper">
-    <div class="social-icons">
-      {
-        SOCIALS.filter((social) => social.active).map((social) => (
-          <LinkButton
-            href={social.href}
-            className="link-button"
-            title={social.name}
-          >
-            <Fragment set:html={socialIcons[social.name]} />
-          </LinkButton>
-        ))
-      }
-    </div>
+    <Socials />
     <div class="copyright-wrapper">
       <span>Copyright &#169; {currentYear}</span>
       <span class="separator">&nbsp;|&nbsp;</span>
@@ -56,7 +45,4 @@ const { noMarginTop = false } = Astro.props;
   .separator {
     @apply hidden sm:inline;
   }
-  .social-icons {
-    @apply flex flex-wrap justify-center gap-1;
-  }
 </style>