Blocks.astro

---
import type { AnyBlock } from './Blocks';
import ActionBlock from './ActionBlock/ActionBlock.astro';
import EmbedBlock from './EmbedBlock/EmbedBlock.astro';
import ImageBlock from './ImageBlock/ImageBlock.astro';
import PagePartialBlock from './PagePartialBlock/PagePartialBlock.astro';
import TableBlock from './TableBlock/TableBlock.astro';
import TextBlock from './TextBlock/TextBlock.astro';
import TextImageBlock from './TextImageBlock/TextImageBlock.astro';
import VideoBlock from './VideoBlock/VideoBlock.astro';
import VideoEmbedBlock from './VideoEmbedBlock/VideoEmbedBlock.astro';

const blocksByTypename = {
  ActionBlockRecord: ActionBlock,
  EmbedBlockRecord: EmbedBlock,
  ImageBlockRecord: ImageBlock,
  PagePartialBlockRecord: PagePartialBlock,
  TableBlockRecord: TableBlock,
  TextBlockRecord: TextBlock,
  TextImageBlockRecord: TextImageBlock,
  VideoBlockRecord: VideoBlock,
  VideoEmbedBlockRecord: VideoEmbedBlock,
};

interface Props {
  blocks: AnyBlock[];
}
const { blocks } = Astro.props;
---

{
  blocks.map((block) => {
    const typename = block.__typename as keyof typeof blocksByTypename;
    const Block = blocksByTypename[typename];
    return Block ? (
      // @ts-ignore next line
      <Block block={block} />
    ) : (
      <script define:vars={{ typename }} is:inline>
        console.log(`No Block found for "${typename}"`);
      </script>
    );
  })
}