diff --git a/content/pages/home.mdx b/content/pages/home.mdx index 3aabd08..79a0cdd 100644 --- a/content/pages/home.mdx +++ b/content/pages/home.mdx @@ -1,6 +1,46 @@ --- title: Home blocks: + - logo: + src: /inreach-logos/InReach_Logo_Color_RGB.svg + alt: InReach Logo + navBGColor: Green + navLinks: + - linkName: About + linkUrls: + - sectionUrl: Mission + pathURL: / + - sectionUrl: Our Team + pathURL: /example-gallery + - sectionUrl: Our Vetting Process + pathURL: / + - linkName: News + linkUrls: + - sectionUrl: In The News + pathURL: / + - sectionUrl: Awards + pathURL: / + - sectionUrl: Our Blog + pathURL: / + - linkName: Get Help + linkUrls: + - sectionUrl: Get Help For Myself + pathURL: / + - sectionUrl: Get Help For My Client + pathURL: / + - linkName: Take Action + linkUrls: + - sectionUrl: Donate + pathURL: / + - sectionUrl: Multiply Your Support + pathURL: / + - linkName: Contact + linkUrls: + - sectionUrl: Contact Us + pathURL: / + - sectionUrl: Donor Dashboard + pathURL: / + _template: header - slides: - backgroundImage: /home/Homepage.jpg slideTitle: InReach @@ -134,3 +174,4 @@ blocks: disclaimer: 'InReach, Inc. 2023 • All rights reserved • InReach ❤️ Open Source' _template: footer --- + diff --git a/src/components/RenderBlocks.tsx b/src/components/RenderBlocks.tsx index 7a3e89f..caf94e2 100644 --- a/src/components/RenderBlocks.tsx +++ b/src/components/RenderBlocks.tsx @@ -6,6 +6,7 @@ import { CarouselContainer } from './blocks/Carousel' import { FooterContainer } from './blocks/Footer' import { LookingForContainer } from './blocks/LookingFor' import { TitleImageGrid } from './blocks/layout/TitleImageGrid' +import { Header } from './blocks/layout/Header' export const Blocks = (props: Omit) => { return ( @@ -55,6 +56,12 @@ export const Blocks = (props: Omit) => { ) + case 'PageBlocksHeader': + return ( +
+
+
+ ) } }) : null} diff --git a/src/components/blocks/NewsSupporters.tsx b/src/components/blocks/NewsSupporters.tsx index 5bdca5d..d119683 100644 --- a/src/components/blocks/NewsSupporters.tsx +++ b/src/components/blocks/NewsSupporters.tsx @@ -6,10 +6,10 @@ import { PageBlocksNewsSupporters, PageBlocksNewsSupportersCompanies } from '~ti export const NewsSupporters = ({ data }: { data: PageBlocksNewsSupporters }) => { return ( - + {data.title && ( -
+
)} diff --git a/src/components/blocks/layout/Header.tsx b/src/components/blocks/layout/Header.tsx new file mode 100644 index 0000000..6f502d0 --- /dev/null +++ b/src/components/blocks/layout/Header.tsx @@ -0,0 +1,148 @@ +import { Menu, Burger, Group } from '@mantine/core' +import Image from 'next/image' +import React from 'react' +import { Template } from 'tinacms' +import { + PageBlocksHeader, + PageBlocksHeaderNavLinks, + PageBlocksHeaderNavLinksLinkUrls, +} from '~tina/__generated__/types' +import { cn } from '../../../lib/utils' +import { ColorSelector } from '../../../components/fields/ColorSelector/ColorSelector' +import { inputClasses } from '../../../components/fields/ColorSelector/colors' +import { useDisclosure } from '@mantine/hooks' + +export const Header = ({ data }: { data: PageBlocksHeader }) => { + + const items = data.navLinks ? + data.navLinks.map((item, i) => { + return ( + + {item?.linkName && ( + +

{item?.linkName}

+ + )} + + {item && + item.linkUrls && + item.linkUrls.map((link, i) => { + if (link && link.sectionUrl && link.pathURL) + return ( + + {link.sectionUrl} + + ) + })} + + + ) + }) + : + null + + const [opened, { toggle }] = useDisclosure(false) + + return ( +
+
+ {data.logo && data.logo.src && data.logo.alt && ( + {data.logo.alt} + )} + {data.navLinks && ( + <> + + {items} + + + + )} +
+
+ ) +} + +export const headerTemplate: Template = { + name: 'header', + label: 'Header', + fields: [ + { + name: 'logo', + type: 'object', + label: 'Logo', + fields: [ + { + name: 'src', + label: 'Logo Source', + type: 'image', + }, + { + name: 'alt', + label: 'Logo Alt', + type: 'string', + }, + ], + }, + { + name: 'navBGColor', + label: 'Background Color', + type: 'string', + ui: { + component: ColorSelector, + }, + }, + { + name: 'navLinks', + label: 'Links', + list: true, + type: 'object', + ui: { + itemProps: (item: PageBlocksHeaderNavLinks) => { + return { + label: item.linkName ? item.linkName : 'New Link', + } + }, + }, + fields: [ + { + name: 'linkName', + label: 'Link Name', + description: 'The name of the link shown in the navbar', + type: 'string', + }, + { + name: 'linkUrls', + label: 'Link URLs', + type: 'object', + list: true, + ui: { + itemProps: (item: PageBlocksHeaderNavLinksLinkUrls) => { + return { + label: item.sectionUrl ? item.sectionUrl : 'New Link', + } + }, + }, + fields: [ + { + name: 'sectionUrl', + label: 'Sub URLs', + type: 'string', + description: 'This is the name of the URL to be shown in the hover dropdown', + }, + { + name: 'pathURL', + label: 'Path URL', + type: 'string', + description: 'This is the path URL to the page', + }, + ], + }, + ], + }, + ], +} diff --git a/src/components/blocks/layout/TitleImageGrid.tsx b/src/components/blocks/layout/TitleImageGrid.tsx index 1b5046b..8d6110c 100644 --- a/src/components/blocks/layout/TitleImageGrid.tsx +++ b/src/components/blocks/layout/TitleImageGrid.tsx @@ -15,7 +15,7 @@ export const TitleImageGrid = ({ data }: { data: PageBlocksTitleImageGrid }) => {data.titleImageGridHeader && (