windwiderstand.de/src/components/ContentRows.svelte

<script lang="ts">
  import MarkdownBlock from "./blocks/MarkdownBlock.svelte";
  import HeadlineBlock from "./blocks/HeadlineBlock.svelte";
  import HtmlBlock from "./blocks/HtmlBlock.svelte";
  import IframeBlock from "./blocks/IframeBlock.svelte";
  import ImageBlock from "./blocks/ImageBlock.svelte";
  import ImageGalleryBlock from "./blocks/ImageGalleryBlock.svelte";
  import YoutubeVideoBlock from "./blocks/YoutubeVideoBlock.svelte";
  import QuoteBlock from "./blocks/QuoteBlock.svelte";
  import LinkListBlock from "./blocks/LinkListBlock.svelte";
  import PostOverviewBlock from "./blocks/PostOverviewBlock.svelte";
  import SearchableTextBlock from "./blocks/SearchableTextBlock.svelte";
  import { isBlockLayoutBreakout, getSpaceBottomClass } from "../lib/block-layout";
  import type { BlockLayout } from "../lib/block-layout";
  import type {
    RowContentLayout,
    ResolvedBlock,
    MarkdownBlockData,
    HeadlineBlockData,
    HtmlBlockData,
    IframeBlockData,
    ImageBlockData,
    ImageGalleryBlockData,
    YoutubeVideoBlockData,
    QuoteBlockData,
    LinkListBlockData,
    PostOverviewBlockData,
    SearchableTextBlockData,
  } from "../lib/block-types";

  let {
    layout,
    class: className = "",
    searchableTextHelpTooltip,
  }: { layout: RowContentLayout; class?: string; searchableTextHelpTooltip?: string } = $props();

  function isResolvedBlock(item: unknown): item is ResolvedBlock {
    return typeof item === "object" && item !== null;
  }

  function blockType(item: ResolvedBlock): string {
    return (item._type as string) ?? "unknown";
  }

  function justifyToClass(j?: string): string {
    switch (j) {
      case "end": return "justify-end";
      case "center": return "justify-center";
      case "between": return "justify-between";
      case "around": return "justify-around";
      case "evenly": return "justify-evenly";
      default: return "justify-start";
    }
  }

  function alignToClass(a?: string): string {
    switch (a) {
      case "end": return "items-end";
      case "center": return "items-center";
      case "baseline": return "items-baseline";
      case "stretch": return "items-stretch";
      default: return "items-start";
    }
  }

  const rows = $derived([
    {
      content: layout.row1Content ?? [],
      justify: justifyToClass(layout.row1JustifyContent),
      align: alignToClass(layout.row1AlignItems),
    },
    {
      content: layout.row2Content ?? [],
      justify: justifyToClass(layout.row2JustifyContent),
      align: alignToClass(layout.row2AlignItems),
    },
    {
      content: layout.row3Content ?? [],
      justify: justifyToClass(layout.row3JustifyContent),
      align: alignToClass(layout.row3AlignItems),
    },
  ]);
</script>

<div class="content my-6 {className}">
  {#each rows as row}
    {#if row.content.length > 0}
      <div
        class="content-row grid grid-cols-12 gap-4 {row.justify} {row.align}"
        role="region"
        data-cf-type="grid-row"
      >
        {#each row.content as item}
          {#if isResolvedBlock(item)}
            {#snippet blockContent()}
              {#if blockType(item) === "markdown"}
                <MarkdownBlock block={item as MarkdownBlockData} />
              {:else if blockType(item) === "headline"}
                <HeadlineBlock block={item as HeadlineBlockData} />
              {:else if blockType(item) === "html"}
                <HtmlBlock block={item as HtmlBlockData} />
              {:else if blockType(item) === "iframe"}
                <IframeBlock block={item as IframeBlockData} />
              {:else if blockType(item) === "image"}
                <ImageBlock block={item as ImageBlockData} />
              {:else if blockType(item) === "image_gallery"}
                <ImageGalleryBlock block={item as ImageGalleryBlockData} />
              {:else if blockType(item) === "youtube_video"}
                <YoutubeVideoBlock block={item as YoutubeVideoBlockData} />
              {:else if blockType(item) === "quote"}
                <QuoteBlock block={item as QuoteBlockData} />
              {:else if blockType(item) === "link_list"}
                <LinkListBlock block={item as LinkListBlockData} />
              {:else if blockType(item) === "post_overview"}
                <PostOverviewBlock block={item as PostOverviewBlockData} />
              {:else if blockType(item) === "searchable_text"}
                <SearchableTextBlock
                  block={item as SearchableTextBlockData}
                  helpTooltip={searchableTextHelpTooltip}
                />
              {:else}
                <div class="col-span-12 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
                  Unbekannter Block: <code>{blockType(item)}</code>
                </div>
              {/if}
            {/snippet}
            {#if isBlockLayoutBreakout((item as { layout?: BlockLayout }).layout)}
              <div class="col-span-12">
                <div class="component-breakout--{blockType(item)} {getSpaceBottomClass((item as { layout?: BlockLayout }).layout)} w-screen relative left-1/2 -translate-x-1/2 max-w-none [background:var(--color-container-breakout)]">
                  <div class="container-custom py-4">
                    {@render blockContent()}
                  </div>
                </div>
              </div>      
            {:else}
              {@render blockContent()}
            {/if}
          {/if}
        {/each}
      </div>
    {/if}
  {/each}
</div>