edb/neuf-www
8
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add a button link component

Browse Source
This commit is contained in:
Jonas Braathen
2026-07-02 23:44:53 +02:00
parent 31453af238
commit b0698247b6
14 changed files with 371 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/blocks/Blocks.tsx
+4
View File
@@ -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
+57
View File
@@ -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>
);
};
web/src/gql/gql.ts
+9 -3
View File
@@ -26,6 +26,7 @@ type Documents = {
"\n query allAssociations {\n index: associationIndex {\n ... on AssociationIndex {\n ...AssociationIndex\n }\n }\n associations: pages(\n contentType: \"associations.AssociationPage\"\n limit: 1000\n ) {\n ... on AssociationPage {\n ...Association\n }\n }\n }\n": typeof types.AllAssociationsDocument,
"\n query associationBySlug($slug: String!) {\n association: page(\n contentType: \"associations.AssociationPage\"\n slug: $slug\n ) {\n ... on AssociationPage {\n ...Association\n }\n }\n }\n": typeof types.AssociationBySlugDocument,
"\n fragment AccordionBlock on AccordionBlock {\n heading\n body {\n id\n blockType\n }\n }\n": typeof types.AccordionBlockFragmentDoc,
"\n fragment ButtonLinkBlock on ButtonLinkBlock {\n buttonText: text\n buttonAnchor: anchor\n buttonExternalUrl: externalUrl\n buttonPage: page {\n url\n }\n }\n": typeof types.ButtonLinkBlockFragmentDoc,
"\n fragment ContactEntityBlock on ContactEntityBlock {\n contactEntity {\n ...ContactEntity\n }\n }\n": typeof types.ContactEntityBlockFragmentDoc,
"\n fragment ContactListBlock on ContactListBlock {\n items {\n blockType\n ... on ContactEntityBlock {\n contactEntity {\n ...ContactEntity\n }\n }\n }\n }\n": typeof types.ContactListBlockFragmentDoc,
"\n fragment ContactSectionBlock on ContactSectionBlock {\n title\n text\n blocks {\n id\n blockType\n }\n }\n": typeof types.ContactSectionBlockFragmentDoc,
@@ -60,7 +61,7 @@ type Documents = {
"\n query venueBySlug($slug: String!) {\n venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n": typeof types.VenueBySlugDocument,
"\n fragment VenueRentalIndex on VenueRentalIndex {\n __typename\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n }\n": typeof types.VenueRentalIndexFragmentDoc,
"\n query venueRentalIndex {\n index: venueRentalIndex {\n ... on VenueRentalIndex {\n ...VenueRentalIndex\n }\n }\n venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n": typeof types.VenueRentalIndexDocument,
"\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n }\n": typeof types.LeafBlocksFragmentDoc,
"\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n ... on ButtonLinkBlock {\n ...ButtonLinkBlock\n }\n }\n": typeof types.LeafBlocksFragmentDoc,
"\n fragment OneLevelOfBlocks on StreamFieldInterface {\n ...LeafBlocks\n ... on AccordionBlock {\n ...AccordionBlock\n body {\n ...LeafBlocks\n }\n }\n ... on PageSectionBlock {\n ...PageSectionBlock\n body {\n ...LeafBlocks\n }\n }\n }\n": typeof types.OneLevelOfBlocksFragmentDoc,
"\n fragment Blocks on StreamFieldInterface {\n ...OneLevelOfBlocks\n ... on AccordionBlock {\n ...AccordionBlock\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on PageSectionBlock {\n ...PageSectionBlock\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on ContactSectionBlock {\n ...ContactSectionBlock\n blocks {\n ...OneLevelOfBlocks\n ... on ContactSubsectionBlock {\n ...ContactSubsectionBlock\n blocks {\n ...OneLevelOfBlocks\n }\n }\n }\n }\n }\n": typeof types.BlocksFragmentDoc,
"\n fragment Image on CustomImage {\n id\n url\n width\n height\n alt\n attribution\n }\n": typeof types.ImageFragmentDoc,
@@ -96,6 +97,7 @@ const documents: Documents = {
"\n query allAssociations {\n index: associationIndex {\n ... on AssociationIndex {\n ...AssociationIndex\n }\n }\n associations: pages(\n contentType: \"associations.AssociationPage\"\n limit: 1000\n ) {\n ... on AssociationPage {\n ...Association\n }\n }\n }\n": types.AllAssociationsDocument,
"\n query associationBySlug($slug: String!) {\n association: page(\n contentType: \"associations.AssociationPage\"\n slug: $slug\n ) {\n ... on AssociationPage {\n ...Association\n }\n }\n }\n": types.AssociationBySlugDocument,
"\n fragment AccordionBlock on AccordionBlock {\n heading\n body {\n id\n blockType\n }\n }\n": types.AccordionBlockFragmentDoc,
"\n fragment ButtonLinkBlock on ButtonLinkBlock {\n buttonText: text\n buttonAnchor: anchor\n buttonExternalUrl: externalUrl\n buttonPage: page {\n url\n }\n }\n": types.ButtonLinkBlockFragmentDoc,
"\n fragment ContactEntityBlock on ContactEntityBlock {\n contactEntity {\n ...ContactEntity\n }\n }\n": types.ContactEntityBlockFragmentDoc,
"\n fragment ContactListBlock on ContactListBlock {\n items {\n blockType\n ... on ContactEntityBlock {\n contactEntity {\n ...ContactEntity\n }\n }\n }\n }\n": types.ContactListBlockFragmentDoc,
"\n fragment ContactSectionBlock on ContactSectionBlock {\n title\n text\n blocks {\n id\n blockType\n }\n }\n": types.ContactSectionBlockFragmentDoc,
@@ -130,7 +132,7 @@ const documents: Documents = {
"\n query venueBySlug($slug: String!) {\n venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n": types.VenueBySlugDocument,
"\n fragment VenueRentalIndex on VenueRentalIndex {\n __typename\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n }\n": types.VenueRentalIndexFragmentDoc,
"\n query venueRentalIndex {\n index: venueRentalIndex {\n ... on VenueRentalIndex {\n ...VenueRentalIndex\n }\n }\n venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n": types.VenueRentalIndexDocument,
"\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n }\n": types.LeafBlocksFragmentDoc,
"\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n ... on ButtonLinkBlock {\n ...ButtonLinkBlock\n }\n }\n": types.LeafBlocksFragmentDoc,
"\n fragment OneLevelOfBlocks on StreamFieldInterface {\n ...LeafBlocks\n ... on AccordionBlock {\n ...AccordionBlock\n body {\n ...LeafBlocks\n }\n }\n ... on PageSectionBlock {\n ...PageSectionBlock\n body {\n ...LeafBlocks\n }\n }\n }\n": types.OneLevelOfBlocksFragmentDoc,
"\n fragment Blocks on StreamFieldInterface {\n ...OneLevelOfBlocks\n ... on AccordionBlock {\n ...AccordionBlock\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on PageSectionBlock {\n ...PageSectionBlock\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on ContactSectionBlock {\n ...ContactSectionBlock\n blocks {\n ...OneLevelOfBlocks\n ... on ContactSubsectionBlock {\n ...ContactSubsectionBlock\n blocks {\n ...OneLevelOfBlocks\n }\n }\n }\n }\n }\n": types.BlocksFragmentDoc,
"\n fragment Image on CustomImage {\n id\n url\n width\n height\n alt\n attribution\n }\n": types.ImageFragmentDoc,
@@ -216,6 +218,10 @@ export function graphql(source: "\n query associationBySlug($slug: String!) {\n
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment AccordionBlock on AccordionBlock {\n heading\n body {\n id\n blockType\n }\n }\n"): (typeof documents)["\n fragment AccordionBlock on AccordionBlock {\n heading\n body {\n id\n blockType\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment ButtonLinkBlock on ButtonLinkBlock {\n buttonText: text\n buttonAnchor: anchor\n buttonExternalUrl: externalUrl\n buttonPage: page {\n url\n }\n }\n"): (typeof documents)["\n fragment ButtonLinkBlock on ButtonLinkBlock {\n buttonText: text\n buttonAnchor: anchor\n buttonExternalUrl: externalUrl\n buttonPage: page {\n url\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
@@ -355,7 +361,7 @@ export function graphql(source: "\n query venueRentalIndex {\n index: venueR
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n }\n"): (typeof documents)["\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n }\n"];
export function graphql(source: "\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n ... on ButtonLinkBlock {\n ...ButtonLinkBlock\n }\n }\n"): (typeof documents)["\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n ... on ButtonLinkBlock {\n ...ButtonLinkBlock\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
web/src/gql/graphql.ts
+83 -26
View File
File diff suppressed because one or more lines are too long
web/src/lib/common.ts
+3
View File
@@ -123,6 +123,9 @@ const LeafBlocksFragmentDefinition = graphql(`
... on ScheduleBlock {
...ScheduleBlock
}
... on ButtonLinkBlock {
...ButtonLinkBlock
}
}
`);