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>

src/components/Socials.astro

@@ -0,0 +1,30 @@
+---
+import { SOCIALS } from "src/config";
+import LinkButton from "./LinkButton.astro";
+import socialIcons from "@assets/socialIcons";
+---
+
+
+<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>
+
+<style>
+  .social-icons {
+    @apply flex flex-wrap justify-center gap-1;
+    @apply mt-1 sm:mt-0 sm:ml-2 sm:space-x-1;
+  }
+  .link-button {
+    @apply p-2 sm:p-1 hover:rotate-6;
+  }
+</style>

src/pages/index.astro

@@ -1,5 +1,4 @@
 ---
-import { SOCIALS } from "src/config";
 import Layout from "@layouts/Layout.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
@@ -7,9 +6,9 @@ import LinkButton from "@components/LinkButton.astro";
 import Hr from "@components/Hr.astro";
 import Card from "@components/Card";
 import getSortedPosts from "@utils/getSortedPosts";
-import socialIcons from "@assets/socialIcons";
 import slugify from "@utils/slugify";
 import type { Frontmatter } from "src/types";
+import Socials from "@components/Socials.astro";
 
 const posts = await Astro.glob<Frontmatter>("../contents/*.md");
 
@@ -49,19 +48,7 @@ const sortedPosts = getSortedPosts(posts);
       </p>
       <div class="social-wrapper">
         <div class="whitespace-nowrap">Social Links:</div>
-        <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>
     </section>
 
@@ -119,7 +106,7 @@ const sortedPosts = getSortedPosts(posts);
   <Footer />
 </Layout>
 
-<style>
+<style is:global>
   /* ===== Hero Section ===== */
   #hero {
     @apply pt-8;
@@ -139,12 +126,6 @@ const sortedPosts = getSortedPosts(posts);
   .social-wrapper {
     @apply flex flex-col sm:flex-row sm:items-center mt-4 mb-6;
   }
-  .social-icons {
-    @apply mt-1 sm:mt-0 sm:ml-2 sm:space-x-1;
-  }
-  .link-button {
-    @apply p-2 sm:p-1 hover:rotate-6;
-  }
 
   /* ===== Featured & Recent Posts Sections ===== */
   #featured,
@@ -155,7 +136,6 @@ const sortedPosts = getSortedPosts(posts);
   #recent-posts h2 {
     @apply font-semibold text-2xl tracking-wide;
   }
-
   .all-posts-btn-wrapper {
     @apply text-center my-8;
   }