add conductor application button for forum popup

railwayapp · Dec 6, 2024 · fbd96cd · fbd96cd
1 parent ecda1e9
commit fbd96cd
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 1 deletion.
diff --git a/src/components/TallyButton.tsx b/src/components/TallyButton.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import "twin.macro";
+import { ArrowRight } from "react-feather";
+
+interface ButtonProps {
+  children: React.ReactNode;
+}
+
+export const TallyButton: React.FC<ButtonProps> = ({ children, ...props }) => (
+  <button
+    {...props}
+    tw="block font-medium rounded shadow px-3 py-2 focus:outline-none bg-gray-100 border-gray-100 text-gray-800 hover:bg-gray-200"
+  >
+    <div tw="flex flex-row justify-center items-center font-semibold">
+      <ArrowRight tw="mr-1" />
+      {children}
+    </div>
+  </button>
+);
diff --git a/src/docs/community/the-conductor-program.md b/src/docs/community/the-conductor-program.md
@@ -40,6 +40,8 @@ Here's what we look for in potential Conductors -
 
 The ideal Conductor combines technical expertise with mentorship skills to help our community thrive!
 
+<TallyButton data-tally-open="nP2qqd" data-tally-width="700" data-tally-emoji-text="👋" data-tally-emoji-animation="wave" data-tally-auto-close="2000">Apply Now</TallyButton>
+
 ## Conductor Benefits
 
 Being a Conductor comes with several exciting perks and rewards to recognize your valuable contributions to the community.

diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
@@ -13,6 +13,7 @@ import { GetServerSidePropsContext } from "next";
 import { getCookie } from "cookies-next";
 import { Props as CodeBlockProps } from "@/components/CodeBlock";
 import { Props as InlineCodeProps } from "@/components/InlineCode";
+import { TallyButton } from "@/components/TallyButton";
 
 const components: Record<string, React.ElementType> = {
   Collapse,
@@ -24,6 +25,7 @@ const components: Record<string, React.ElementType> = {
   h2: H2,
   h3: H3,
   h4: H4,
+  TallyButton,
 };
 
 export default function PostPage({

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -36,7 +36,9 @@ class MyDocument extends Document {
   render() {
     return (
       <Html lang="en">
-        <Head />
+        <Head>
+          <script async src="https://tally.so/widgets/embed.js"></script>
+        </Head>
         <body>
           <Main />
           <NextScript />