Merge pull request #2 from elpekenin/social-component

Add `Socials` component to avoid code duplication

src/components/Footer.astro

@@ -1,8 +1,6 @@
 ---
-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 +14,7 @@ const { noMarginTop = false } = Astro.props;
 <footer class={`${noMarginTop ? "" : "mt-auto"}`}>
   <Hr noPadding />
   <div class="footer-wrapper">
-    <div class="social-icons">
+    <Socials centered />
-      {
-        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>
     <div class="copyright-wrapper">
       <span>Copyright &#169; {currentYear}</span>
       <span class="separator">&nbsp;|&nbsp;</span>
@@ -56,7 +42,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,35 @@
+---
+import { SOCIALS } from "src/config";
+import LinkButton from "./LinkButton.astro";
+import socialIcons from "@assets/socialIcons";
+
+export interface Props {
+  centered?: boolean;
+}
+
+const { centered = false } = Astro.props;
+---
+
+
+<div class={`social-icons ${centered ? "flex" : ""}`}>
+    {
+      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-wrap justify-center gap-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");
 
@@ -48,20 +47,8 @@ const sortedPosts = getSortedPosts(posts);
         > for more info.
       </p>
       <div class="social-wrapper">
-        <div class="whitespace-nowrap">Social Links:</div>
+        <div class="social-links">Social Links:</div>
-        <div class="social-icons">
+          <Socials />
-          {
-            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>
       </div>
     </section>
 
@@ -139,11 +126,8 @@ const sortedPosts = getSortedPosts(posts);
   .social-wrapper {
     @apply flex flex-col sm:flex-row sm:items-center mt-4 mb-6;
   }
-  .social-icons {
+  .social-links {
-    @apply mt-1 sm:mt-0 sm:ml-2 sm:space-x-1;
+    @apply whitespace-nowrap mr-2 sm:mb-0 mb-1;
-  }
-  .link-button {
-    @apply p-2 sm:p-1 hover:rotate-6;
   }
 
   /* ===== Featured & Recent Posts Sections ===== */
@@ -155,7 +139,6 @@ const sortedPosts = getSortedPosts(posts);
   #recent-posts h2 {
     @apply font-semibold text-2xl tracking-wide;
   }
-
   .all-posts-btn-wrapper {
     @apply text-center my-8;
   }