Moved buttons to it's own component and added the new compoenent to the footer.

src/components/buttons/data/links.ts

@@ -0,0 +1,28 @@
+export interface LinkObj {
+  href?: string;
+  name?: string;
+  type: "primary" | "secondary" | "twitter" | "patreon";
+}
+
+type Links = LinkObj[];
+
+const links: Links = [
+  {
+    href: "https://docs.google.com/document/d/1hrerGKHTO3iach8A-CabtfIB4lyZWlgO8EGTyOCrI2Y",
+    name: "Roadmap and Progress",
+    type: "secondary"
+  },
+  {
+    href: "https://lucidcreations.media/introducing-code-name-potty-chart/",
+    name: "Original Announcement",
+    type: "secondary"
+  },
+  {
+    type: "patreon"
+  },
+  {
+    type: "twitter"
+  }
+];
+
+export default links;

src/components/buttons/index.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Box, HStack, VStack } from "@chakra-ui/react";
+import CustomButton from "./Custom";
+import links, { LinkObj } from "./data/links";
+import Patreon from "./Patreon";
+import Twitter from "./Twitter";
+
+const Buttons = (): JSX.Element => {
+  return (
+    <Box h="auto" w="100%">
+      <HStack
+        display={{ base: "none", lg: "flex" }}
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignContent="center"
+        spacing={4}
+      >
+        {links.map((link: LinkObj) => {
+          const { href, name, type } = link;
+
+          if (type === "primary" || type === "secondary") {
+            return (
+              <CustomButton
+                key={name.replaceAll(" ", "-")}
+                link={href}
+                text={name}
+                type={type}
+              />
+            );
+          }
+
+          if (type === "patreon") {
+            return <Patreon key={type} />;
+          }
+
+          if (type === "twitter") {
+            return <Twitter key={type} />;
+          }
+        })}
+      </HStack>
+      <VStack
+        display={{ base: "flex", lg: "none" }}
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignContent="center"
+        spacing={4}
+      >
+        {links.map((link: LinkObj) => {
+          const { href, name, type } = link;
+
+          if (type === "primary" || type === "secondary") {
+            return (
+              <CustomButton
+                key={name.replaceAll(" ", "-")}
+                link={href}
+                text={name}
+                type={type}
+              />
+            );
+          }
+
+          if (type === "patreon") {
+            return <Patreon key={type} />;
+          }
+
+          if (type === "twitter") {
+            return <Twitter key={type} />;
+          }
+        })}
+      </VStack>
+    </Box>
+  );
+};
+
+export default Buttons;