Add Action Network Widget

src/components/display/ActionNetwork.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react'
+
+const ActionNetworkWidget: React.FC = () => {
+  useEffect(() => {
+    // Create a link element for the CSS file
+    const link = document.createElement('link')
+    link.href = 'https://actionnetwork.org/css/style-embed-v3.css'
+    link.rel = 'stylesheet'
+
+    // Create a script element for the widget
+    const script = document.createElement('script')
+    script.src =
+      'https://actionnetwork.org/widgets/v5/event/red-ccn-4-21?format=js&source=widget'
+    script.async = true
+
+    // Append both link and script elements to the document body
+    document.body.appendChild(link)
+    document.body.appendChild(script)
+
+    // Cleanup function to remove the link and script when component unmounts
+    return () => {
+      document.body.removeChild(link)
+      document.body.removeChild(script)
+    }
+  }, []) // Empty dependency array ensures this effect runs only once
+
+  return (
+    <div
+      id="can-event-area-red-ccn-4-21"
+      style={{ width: '90%', margin: '0 auto' }}
+    >
+      {/* This div is the target for our HTML insertion */}
+    </div>
+  )
+}
+
+export default ActionNetworkWidget

src/components/index.ts

@@ -25,6 +25,7 @@ import Tabs from './display/Tabs'
 import ClimateClock from './display/ClimateClock'
 import ImageWithCaption from './display/ImageWithCaption'
 import LinkBox from './display/LinkBox'
+import ActionNetworkWidget from './display/ActionNetwork'
 // Accordions
 import RequestAccordion from './accordion/RequestAccordion'
 import CaseAccordion from './accordion/CaseAccordion'
@@ -106,6 +107,7 @@ export {
   EnergyRadialChart,
   AdminNavBar,
   ClimateClock,
+  ActionNetworkWidget,
   AdminSelectCard,
   AdminListTable,
   InviteAdminBar,

src/components/navigation/PrimaryNavBar.tsx

@@ -48,7 +48,7 @@ const PrimaryNavBar: FC = () => {
         </Link>
         <Navbar.Toggle className="z-[70]" />
         {/* Flowbite included styles has a w-full on mobile view that pushes whole page to the left, need to adjust for that */}
-        <Navbar.Collapse className="absolute top-0 right-0 h-[130vh] !w-4/5 bg-darkTeal pt-24 md:static md:h-fit md:!w-auto md:bg-white md:pt-0">
+        <Navbar.Collapse className="absolute right-0 top-0 h-[130vh] !w-4/5 bg-darkTeal pt-24 md:static md:h-fit md:!w-auto md:bg-white md:pt-0">
           <NavButton title="Home" link="/home" />
           <NavButton title="Take Action" link="/take-action" />
           <NavButton title="Why Divest?" link="/fossil-fuel" />

src/sections/take-action/momentum.tsx

@@ -1,7 +1,11 @@
 import type { FC } from 'react'
 import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
 
-import { HighlightedTitle, ListItem } from '../../components'
+import {
+  HighlightedTitle,
+  ListItem,
+  ActionNetworkWidget,
+} from '../../components'
 import type { ListEntryDocument } from '../../types'
 import { mainParagraphStyle } from '../../utils/renderer'
 
@@ -27,6 +31,9 @@ const Momentum: FC<{ entries: ListEntryDocument[] }> = ({ entries }) => {
           ))}
         </div>
       </div>
+      <div id="actionNetwork" className="pt-10">
+        <ActionNetworkWidget />
+      </div>
     </div>
   )
 }