feat: add share links in blog post (#215)

* Add share links

* refactor: update and rename Sharebutton to ShareLinks

- rename SOCIALS to shareLinks to avoid confusion with `src/config.ts > SOCIALS`
- fix type error related with shareLinks
- add `linkTitle` in shareLinks for better accessibility
- update styles to looks good in all devices

* refactor: place ShareLinks next to `back to top`

- place ShareLinks at the bottom (next to `back to top`)
- update styles for ShareLinks and Back to Top button

---------

Co-authored-by: Sat Naing <satnaingdev@gmail.com>

src/components/ShareLinks.astro

@@ -0,0 +1,65 @@
+---
+import LinkButton from "./LinkButton.astro";
+import socialIcons from "@assets/socialIcons";
+
+const URL = Astro.url;
+
+const shareLinks = [
+  {
+    name: "WhatsApp",
+    href: "https://wa.me/?text=",
+    linkTitle: `Share this post via WhatsApp`,
+  },
+  {
+    name: "Facebook",
+    href: "https://www.facebook.com/sharer.php?u=",
+    linkTitle: `Share this post on Facebook`,
+  },
+  {
+    name: "Twitter",
+    href: "https://twitter.com/intent/tweet?url=",
+    linkTitle: `Share this post on Facebook`,
+  },
+  {
+    name: "Telegram",
+    href: "https://t.me/share/url?url=",
+    linkTitle: `Share this post via Telegram`,
+  },
+  {
+    name: "Pinterest",
+    href: "https://pinterest.com/pin/create/button/?url=",
+    linkTitle: `Share this post on Pinterest`,
+  },
+  {
+    name: "Mail",
+    href: "mailto:?subject=See%20this%20post&body=",
+    linkTitle: `Share this post via email`,
+  },
+] as const;
+---
+
+<div class={`social-icons`}>
+  <span class="italic">Share this post on:</span>
+  <div class="text-center">
+    {
+      shareLinks.map(social => (
+        <LinkButton
+          href={`${social.href + URL}`}
+          className="link-button"
+          title={social.linkTitle}
+        >
+          <Fragment set:html={socialIcons[social.name]} />
+        </LinkButton>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .social-icons {
+    @apply flex flex-col flex-wrap items-center justify-center gap-1 sm:items-start;
+  }
+  .link-button {
+    @apply scale-90 p-2 hover:rotate-6 sm:p-1;
+  }
+</style>

src/layouts/PostDetails.astro

@@ -6,6 +6,7 @@ import Tag from "@components/Tag.astro";
 import Datetime from "@components/Datetime";
 import type { CollectionEntry } from "astro:content";
 import { slugifyStr } from "@utils/slugify";
+import ShareLinks from "@components/ShareLinks.astro";
 
 export interface Props {
   post: CollectionEntry<"blog">;
@@ -73,10 +74,13 @@ const layoutProps = {
     <ul class="my-8">
       {tags.map(tag => <Tag tag={slugifyStr(tag)} />)}
     </ul>
-    <div class="flex justify-end">
+
+    <div
+      class="flex flex-col-reverse items-center justify-between gap-6 sm:flex-row-reverse sm:items-end sm:gap-4"
+    >
       <button
         id="back-to-top"
-        class="focus-outline whitespace-nowrap hover:opacity-75"
+        class="focus-outline whitespace-nowrap py-1 hover:opacity-75"
       >
         <svg xmlns="http://www.w3.org/2000/svg" class="rotate-90">
           <path
@@ -85,6 +89,8 @@ const layoutProps = {
         </svg>
         <span>Back to Top</span>
       </button>
+
+      <ShareLinks />
     </div>
   </main>
   <Footer />