windwiderstand/src/lib/components/blocks/SectionGridBlock.svelte

<script lang="ts">
  import { getBlockLayoutClasses } from "$lib/block-layout";
  import SectionGrid from "$lib/components/SectionGrid.svelte";
  import InfoCard from "$lib/components/InfoCard.svelte";
  import type { SectionGridBlockData, InfoCardData } from "$lib/block-types";

  let { block }: { block: SectionGridBlockData } = $props();

  const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
  const actionRef = $derived(
    block.action && typeof block.action === "object" ? block.action : null,
  );
  const cards = $derived(
    (block.cards ?? []).filter(
      (c): c is InfoCardData => typeof c === "object" && c !== null,
    ),
  );
  const cols = $derived(
    (block.columns === "2" ? 2 : block.columns === "3" ? 3 : 4) as 2 | 3 | 4,
  );
</script>

<div
  class={layoutClasses}
  data-block="SectionGrid"
  data-block-type="section_grid"
  data-block-slug={block._slug}
>
  <SectionGrid
    number={block.number}
    kicker={block.kicker}
    title={block.headline}
    subtitle={block.subtitle}
    actionLabel={actionRef?.linkName}
    actionHref={actionRef?.url}
    columns={cols}
  >
    {#each cards as card}
      <InfoCard
        icon={card.icon}
        title={card.title ?? ""}
        description={card.description}
        linkLabel={card.linkLabel}
        linkHref={card.linkHref}
        external={card.external}
      />
    {/each}
  </SectionGrid>
</div>