add a button link component

web/src/components/blocks/Blocks.tsx

@@ -11,6 +11,7 @@ import { AccordionBlock } from "./AccordionBlock";
 import { EmbedBlock } from "./EmbedBlock";
 import { FactBoxBlock } from "./FactBoxBlock";
 import { ScheduleBlock } from "./ScheduleBlock";
+import { ButtonLinkBlock } from "./ButtonLinkBlock";
 import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
 import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
 import { ContactListBlock } from "./ContactListBlock";
@@ -52,6 +53,9 @@ export const Blocks = ({ blocks, pageContent }: { blocks: any, pageContent?: boo
       case "ScheduleBlock":
         return <ScheduleBlock key={block.id} block={block} />;
         break;
+      case "ButtonLinkBlock":
+        return <ButtonLinkBlock key={block.id} block={block} />;
+        break;
       case "PageSectionBlock":
         return <PageSectionBlock key={block.id} block={block} />;
         break;

web/src/components/blocks/ButtonLinkBlock.tsx

@@ -0,0 +1,57 @@
+import { graphql } from "@/gql";
+import { type ButtonLinkBlockFragment } from "@/gql/graphql";
+import Link from "next/link";
+import { Icon } from "@/components/general/Icon";
+
+export const ButtonLinkBlockFragmentDefinition = graphql(`
+  fragment ButtonLinkBlock on ButtonLinkBlock {
+    buttonText: text
+    buttonAnchor: anchor
+    buttonExternalUrl: externalUrl
+    buttonPage: page {
+      url
+    }
+  }
+`);
+
+export const ButtonLinkBlock = ({
+  block,
+}: {
+  block: ButtonLinkBlockFragment;
+}) => {
+  const anchor = block.buttonAnchor ? `#${block.buttonAnchor}` : "";
+  const pageUrl = block.buttonPage?.url;
+  const externalUrl = block.buttonExternalUrl;
+
+  let href = "#";
+  let isExternal = false;
+  if (pageUrl) {
+    href = `${pageUrl}${anchor}`;
+  } else if (externalUrl) {
+    href = `${externalUrl}${anchor}`;
+    isExternal = true;
+  } else if (anchor) {
+    href = anchor;
+  }
+
+  if (isExternal) {
+    return (
+      <a
+        href={href}
+        className="button"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <span>{block.buttonText}</span>
+        <Icon type="externalLink" />
+      </a>
+    );
+  }
+
+  return (
+    <Link href={href} className="button">
+      <span>{block.buttonText}</span>
+      <Icon type="arrowRight" />
+    </Link>
+  );
+};