Refactored the contacts page into components, removed unnecessary links.

src/info/components/contacts-block.js

@@ -0,0 +1,19 @@
+import CLink from "./contacts-link";
+import { CONTACTS } from "../js/variables";
+
+export default function ContactsBlock({}) {
+  return (
+    <div className="p-4 space-y-4">
+      {Object.keys(CONTACTS).map((contact) => (
+        <CLink
+          key={contact}
+          src={CONTACTS[contact].src}
+          alt={CONTACTS[contact].alt}
+          url={CONTACTS[contact].url}
+          description={contact}
+          url_text={CONTACTS[contact].url_text}
+        />
+      ))}
+    </div>
+  );
+}

src/info/components/contacts-link.js

@@ -0,0 +1,21 @@
+import Image from "next/image";
+
+export default function ContactsLink({ src, alt, url, description, url_text }) {
+  return (
+    <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
+      <a href={url} target="_blank">
+        <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
+          <Image src={src} layout="fill" objectFit="contain" alt={alt} />
+        </span>
+      </a>{" "}
+      {description}{" "}
+      <a
+        className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
+        href={url}
+        target="_blank"
+      >
+        {url_text}
+      </a>
+    </p>
+  );
+}

src/info/js/variables.js

@@ -146,6 +146,35 @@ export const PAGES = {
   },
 };
 
+// An object listing pages folks can visit
+
+export const CONTACTS = {
+  "My public Mastodon": {
+    url: "https://vulpine.club/@shadow8t4",
+    src: "/emoji/mastodon-logo.png",
+    alt: "The Mastodon logo",
+    url_text: "@shadow8t4@vulpine.club",
+  },
+  "My Twitter": {
+    url: "https://twitter.com/alexis_werefox",
+    src: "/emoji/twitter-logo.png",
+    alt: "The Twitter logo",
+    url_text: "@alexis_werefox",
+  },
+  "My Twitch": {
+    url: "https://twitch.tv/alexis_werefox",
+    src: "/emoji/twitch-logo.png",
+    alt: "The Twitch logo",
+    url_text: "@Alexis_Werefox",
+  },
+  "My e-mail": {
+    url: "mailto:adh9694@gmail.com",
+    src: "/emoji/inbox.svg",
+    alt: "An inbox emoji",
+    url_text: "adh9694@gmail.com",
+  },
+};
+
 // Use this to list out partners on the partners page. >w>
 
 export const PARTNERS = {
@@ -462,5 +491,5 @@ export const OTHER = {
     alt: "Microphone emoji",
     description: `*Nervous sweating* Heh! sometimes I write some music!? You're free to take a
     listen if you want! Let me know what you think! It's usually based on my poetry.`,
-  }
+  },
 };

src/info/pages/contacts/index.js

@@ -1,6 +1,6 @@
 import BasicPage from "../../components/basic-page";
 import WCard from "../../components/werefox-card";
-import Image from "next/image";
+import CBlock from "../../components/contacts-block";
 
 export default function Contacts() {
   return (
@@ -9,88 +9,7 @@ export default function Contacts() {
       card_title={`"Do you have a [Social Media]?"`}
     >
       <WCard innerText="You can find me in quite a few places!">
-        <div className="p-4 space-y-4">
+        <CBlock />
-          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
-            <a href="https://vulpine.club/@shadow8t4" target="_blank">
-              <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
-                <Image
-                  src="/emoji/mastodon-logo.png"
-                  layout="fill"
-                  objectFit="contain"
-                  alt="Mastodon logo"
-                />
-              </span>
-            </a>{" "}
-            My public Mastodon{" "}
-            <a
-              className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
-              href="https://vulpine.club/@shadow8t4"
-              target="_blank"
-            >
-              @shadow8t4@vulpine.club
-            </a>
-          </p>
-          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
-            <a href="https://twitter.com/alexis_werefox" target="_blank">
-              <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
-                <Image
-                  src="/emoji/twitter-logo.png"
-                  layout="fill"
-                  objectFit="contain"
-                  alt="Twitter logo"
-                />
-              </span>
-            </a>{" "}
-            My Twitter{" "}
-            <a
-              className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
-              href="https://twitter.com/alexis_werefox"
-              target="_blank"
-            >
-              @alexis_werefox
-            </a>
-          </p>
-          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
-            <a href="https://www.twitch.tv/alexis_werefox" target="_blank">
-              <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
-                <Image
-                  src="/emoji/twitch-logo.png"
-                  layout="fill"
-                  objectFit="contain"
-                  alt="Twitch logo"
-                />
-              </span>
-            </a>{" "}
-            My Twitch{" "}
-            <a
-              className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
-              href="https://www.twitch.tv/alexis_werefox"
-              target="_blank"
-            >
-              @Alexis_Werefox
-            </a>
-          </p>
-          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
-            <a href="mailto:adh9694@gmail.com" target="">
-              <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
-                <Image
-                  src="/emoji/inbox.svg"
-                  layout="fill"
-                  objectFit="contain"
-                  alt="Inbox emoji"
-                />
-              </span>
-            </a>{" "}
-            My e-mail{" "}
-            <a
-              className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
-              href="mailto:adh9694@gmail.com"
-              target="_blank"
-            >
-              adh9694@gmail.com
-            </a>
-          </p>
-        </div>
       </WCard>
     </BasicPage>
   );