feat(section-grid): InfoCard + SectionGrid als CMS-Block

Neuer section_grid-Block (SectionHeader + Card-Grid aus info_card-Refs) + info_card-Collection. SectionGrid/InfoCard-Komponenten, BlockRenderer-Case, content_layout erlaubt section_grid in Rows. SectionHeader.title jetzt optional (Kicker-only-Header). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-12 09:37:05 +02:00
parent 7c7538a22c
commit 3878a2ed26
8 changed files with 352 additions and 6 deletions
@@ -0,0 +1,49 @@
+<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>