fix: add types for constants to avoid type errors when empty (#501)

Add types for `constants` to avoid type errors
when either `SOCIALS` or `SHARE_LINKS` is empty.

---------

Co-authored-by: satnaing <[email protected]>

Author: kakomonn

src/components/ShareLinks.astro

@@ -5,22 +5,22 @@ import LinkButton from "./LinkButton.astro";
 const URL = Astro.url;
 ---
 
-<div
-  class="flex flex-col flex-wrap items-center justify-center gap-1 sm:items-start"
->
-  <span class="italic">Share this post on:</span>
-  <div class="text-center">
-    {
-      SHARE_LINKS.map(social => (
-        <LinkButton
-          href={`${social.href + URL}`}
-          class="scale-90 p-2 hover:rotate-6 sm:p-1"
-          title={social.linkTitle}
-        >
-          <social.icon class="inline-block size-6 scale-125 fill-transparent stroke-current stroke-2 opacity-90 group-hover:fill-transparent sm:scale-110" />
-          <span class="sr-only">{social.linkTitle}</span>
-        </LinkButton>
-      ))
-    }
-  </div>
-</div>
+{
+  SHARE_LINKS.length > 0 && (
+    <div class="flex flex-none flex-col items-center justify-center gap-1 sm:items-end">
+      <span class="italic">Share this post on:</span>
+      <div class="text-center">
+        {SHARE_LINKS.map(social => (
+          <LinkButton
+            href={`${social.href + URL}`}
+            class="scale-90 p-2 hover:rotate-6 sm:p-1"
+            title={social.linkTitle}
+          >
+            <social.icon class="inline-block size-6 scale-125 fill-transparent stroke-current stroke-2 opacity-90 group-hover:fill-transparent sm:scale-110" />
+            <span class="sr-only">{social.linkTitle}</span>
+          </LinkButton>
+        ))}
+      </div>
+    </div>
+  )
+}

src/constants.ts

@@ -1,3 +1,4 @@
+import type { Props } from "astro";
 import IconMail from "@/assets/icons/IconMail.svg";
 import IconGitHub from "@/assets/icons/IconGitHub.svg";
 import IconBrandX from "@/assets/icons/IconBrandX.svg";
@@ -8,11 +9,18 @@ import IconTelegram from "@/assets/icons/IconTelegram.svg";
 import IconPinterest from "@/assets/icons/IconPinterest.svg";
 import { SITE } from "@/config";
 
-export const SOCIALS = [
+interface Social {
+  name: string;
+  href: string;
+  linkTitle: string;
+  icon: (_props: Props) => Element;
+}
+
+export const SOCIALS: Social[] = [
   {
     name: "Github",
     href: "https://github.com/satnaing/astro-paper",
-    linkTitle: ` ${SITE.title} on Github`,
+    linkTitle: `${SITE.title} on Github`,
     icon: IconGitHub,
   },
   {
@@ -35,7 +43,7 @@ export const SOCIALS = [
   },
 ] as const;
 
-export const SHARE_LINKS = [
+export const SHARE_LINKS: Social[] = [
   {
     name: "WhatsApp",
     href: "https://wa.me/?text=",