diff --git a/apps/codeforafrica/public/images/cms/blocks/get_in_touch.jpg b/apps/codeforafrica/public/images/cms/blocks/get_in_touch.jpg new file mode 100644 index 000000000..ca1fb2b1e Binary files /dev/null and b/apps/codeforafrica/public/images/cms/blocks/get_in_touch.jpg differ diff --git a/apps/codeforafrica/src/components/GetInTouch/GetInTouch.js b/apps/codeforafrica/src/components/GetInTouch/GetInTouch.js index 71c01065b..e79914832 100644 --- a/apps/codeforafrica/src/components/GetInTouch/GetInTouch.js +++ b/apps/codeforafrica/src/components/GetInTouch/GetInTouch.js @@ -8,7 +8,7 @@ import TwoToneBackground from "@/codeforafrica/components/TwoToneBackground"; const GetInTouch = React.forwardRef(function GetInTouch(props, ref) { const { - action: { href, content }, + action: { href, label }, subtitle, title, sx, @@ -59,7 +59,7 @@ const GetInTouch = React.forwardRef(function GetInTouch(props, ref) { }, }} > - {content} + {label} diff --git a/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js b/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js index c1d6a05e7..5d282a7c4 100644 --- a/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js +++ b/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js @@ -36,6 +36,7 @@ exports[` renders unchanged 1`] = ` viewbox="0 0 24 24" /> + Get in touch diff --git a/apps/codeforafrica/src/pages/[...slugs].page.js b/apps/codeforafrica/src/pages/[...slugs].page.js index 4c0ed596f..5c5edee9f 100644 --- a/apps/codeforafrica/src/pages/[...slugs].page.js +++ b/apps/codeforafrica/src/pages/[...slugs].page.js @@ -3,6 +3,7 @@ import { SWRConfig } from "swr"; import CustomPageHeader from "@/codeforafrica/components/CustomPageHeader"; import FeaturedProjects from "@/codeforafrica/components/FeaturedProjects"; +import GetInTouch from "@/codeforafrica/components/GetInTouch"; import GetInvolved from "@/codeforafrica/components/GetInvolved"; import Hero from "@/codeforafrica/components/Hero"; import MeetOurTeam from "@/codeforafrica/components/MeetOurTeam"; @@ -14,6 +15,7 @@ import { getPageServerSideProps } from "@/codeforafrica/lib/data"; const componentsBySlugs = { hero: Hero, + "get-in-touch": GetInTouch, "page-header": PageHeader, "custom-page-header": CustomPageHeader, "meet-our-team": MeetOurTeam, diff --git a/apps/codeforafrica/src/payload/blocks/GetInTouch.js b/apps/codeforafrica/src/payload/blocks/GetInTouch.js new file mode 100644 index 000000000..b50433007 --- /dev/null +++ b/apps/codeforafrica/src/payload/blocks/GetInTouch.js @@ -0,0 +1,24 @@ +import linkGroup from "../fields/links/linkGroup"; + +const GetInTouch = { + slug: "get-in-touch", + imageURL: "/images/cms/blocks/get_in_touch.jpg", + imageAltText: "Display Get In Touch Call to Action", + fields: [ + { + name: "title", + label: "Title", + required: true, + type: "text", + }, + { + name: "subtitle", + label: "Subtitle", + required: true, + type: "text", + }, + linkGroup({ overrides: { name: "action", label: "Action" } }), + ], +}; + +export default GetInTouch; diff --git a/apps/codeforafrica/src/payload/collections/Pages.js b/apps/codeforafrica/src/payload/collections/Pages.js index 19a8445e2..b7f1bf7b3 100644 --- a/apps/codeforafrica/src/payload/collections/Pages.js +++ b/apps/codeforafrica/src/payload/collections/Pages.js @@ -1,5 +1,6 @@ import CustomPageHeader from "../blocks/CustomPageHeader"; import Error from "../blocks/Error"; +import GetInTouch from "../blocks/GetInTouch"; import Hero from "../blocks/Hero"; import OurImpact from "../blocks/OurImpact"; import OurPartners from "../blocks/OurPartners"; @@ -40,6 +41,7 @@ const Pages = { // PageHeader blocks: [ Error, + GetInTouch, Hero, OurImpact, PageHeader, diff --git a/apps/codeforafrica/src/payload/fields/links/linkGroup.js b/apps/codeforafrica/src/payload/fields/links/linkGroup.js new file mode 100644 index 000000000..3931937bf --- /dev/null +++ b/apps/codeforafrica/src/payload/fields/links/linkGroup.js @@ -0,0 +1,24 @@ +import { deepmerge } from "@mui/utils"; + +import link from "./link"; + +/** + * group field consisting of a link field. + */ +function linkGroup({ linkConfig, overrides = {} } = {}) { + const generatedLinkGroup = { + name: "link", + label: { + en: "Link", + fr: "Lien", + pt: "Link", + }, + type: "group", + required: true, + fields: [link(linkConfig)], + }; + + return deepmerge(generatedLinkGroup, overrides); +} + +export default linkGroup;