neuf-www/web/src/components/blocks/Blocks.tsx

import dynamic from "next/dynamic";
import type {
  AccordionBlockFragment,
  ContactEntityBlockFragment,
  ContactListBlockFragment,
  ContactSectionBlockFragment,
  ContactSubsectionBlockFragment,
  EmbedBlockFragment,
  FactBoxBlockFragment,
  FeaturedBlockFragment,
  HorizontalRuleBlockFragment,
  ImageSliderBlockFragment,
  ImageWithTextBlockFragment,
  PageSectionBlockFragment,
  RichTextBlockFragment,
  ScheduleBlockFragment,
} from "@/gql/graphql";
import { AccordionBlock } from "./AccordionBlock";
import { ContactEntityBlock } from "./ContactEntityBlock";
import { ContactListBlock } from "./ContactListBlock";
import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
import { EmbedBlock } from "./EmbedBlock";
import { FactBoxBlock } from "./FactBoxBlock";
import { FeaturedBlock } from "./FeaturedBlock";
import { HorizontalRuleBlock } from "./HorizontalRuleBlock";
import { ImageWithTextBlock } from "./ImageWithTextBlock";
import { NeufAddressSectionBlock } from "./NeufAddressSectionBlock";
import { OpeningHoursSectionBlock } from "./OpeningHoursSectionBlock";
import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
import { RichTextBlock } from "./RichTextBlock";
import { ScheduleBlock } from "./ScheduleBlock";

const ImageSliderBlock = dynamic(() =>
  import("./ImageSliderBlock").then((m) => m.ImageSliderBlock),
);

export type StreamFieldBlock = {
  id?: string | null;
  blockType?: string;
  __typename?: string;
  [key: string]: unknown;
};

export const Blocks = ({
  blocks,
  pageContent,
}: {
  blocks?: Array<StreamFieldBlock | null> | null;
  pageContent?: boolean;
}) => {
  const sections = (blocks ?? []).filter(
    (block) => block?.__typename === "PageSectionBlock",
  ) as PageSectionBlockFragment[];

  return (blocks ?? []).map((block) => {
    if (!block) {
      return null;
    }
    switch (block.blockType) {
      case "RichTextBlock":
        return (
          <RichTextBlock
            key={block.id}
            block={block as RichTextBlockFragment}
          />
        );
      case "ImageWithTextBlock":
        return (
          <ImageWithTextBlock
            key={block.id}
            block={block as ImageWithTextBlockFragment}
          />
        );
      case "EmbedBlock":
        return (
          <EmbedBlock key={block.id} block={block as EmbedBlockFragment} />
        );
      case "ImageSliderBlock":
        return (
          <ImageSliderBlock
            key={block.id}
            block={block as ImageSliderBlockFragment}
            pageContent
          />
        );
      case "HorizontalRuleBlock":
        return (
          <HorizontalRuleBlock
            key={block.id}
            block={block as HorizontalRuleBlockFragment}
          />
        );
      case "FeaturedBlock":
        return (
          <FeaturedBlock
            key={block.id}
            block={block as FeaturedBlockFragment}
          />
        );
      case "AccordionBlock":
        return (
          <AccordionBlock
            key={block.id}
            block={block as AccordionBlockFragment}
          />
        );
      case "FactBoxBlock":
        return (
          <FactBoxBlock key={block.id} block={block as FactBoxBlockFragment} />
        );
      case "ScheduleBlock":
        return (
          <ScheduleBlock
            key={block.id}
            block={block as ScheduleBlockFragment}
          />
        );
      case "PageSectionBlock":
        return (
          <PageSectionBlock
            key={block.id}
            block={block as PageSectionBlockFragment}
          />
        );
      case "PageSectionNavigationBlock":
        return (
          <PageSectionNavigationBlock key={block.id} sections={sections} />
        );
      case "ContactSectionBlock":
        return (
          <ContactSectionBlock
            key={block.id}
            block={block as ContactSectionBlockFragment}
          />
        );
      case "ContactSubsectionBlock":
        return (
          <ContactSubsectionBlock
            key={block.id}
            block={block as ContactSubsectionBlockFragment}
          />
        );
      case "ContactListBlock":
        return (
          <ContactListBlock
            key={block.id}
            block={block as ContactListBlockFragment}
          />
        );
      case "ContactEntityBlock":
        return (
          <ContactEntityBlock
            key={block.id}
            block={block as ContactEntityBlockFragment}
          />
        );
      case "NeufAddressSectionBlock":
        return <NeufAddressSectionBlock key={block.id} />;
      case "OpeningHoursSectionBlock":
        return <OpeningHoursSectionBlock key={block.id} />;
      default:
        console.log("unsupported block", block);
        return (
          <div key={block.id}>Unsupported block type {block.blockType}</div>
        );
    }
  });
};