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

<script lang="ts">
  import { onMount, onDestroy } from "svelte";
  import Icon from "@iconify/svelte";
  import "$lib/iconify-offline";
  import { getBlockLayoutClasses } from "$lib/block-layout";
  import type { QuoteBlockData, QuoteCarouselBlockData } from "$lib/block-types";
  import QuoteBlock from "./QuoteBlock.svelte";

  type QuoteItem = { quote?: string; author?: string; variant?: "left" | "right" | "center" };

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

  const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
  const quotes = $derived(
    ((block.quotes ?? []) as unknown[]).filter(
      (q): q is QuoteItem =>
        typeof q === "object" && q !== null && "quote" in q,
    ),
  );
  const autoRotate = $derived(block.autoRotate !== false);
  const showArrows = $derived(block.showArrows === true);
  const intervalMs = $derived(
    Math.max(2, block.intervalSeconds ?? 6) * 1000,
  );

  let index = $state(0);
  let timer: ReturnType<typeof setInterval> | null = null;
  let paused = $state(false);

  function prev() {
    if (quotes.length === 0) return;
    index = (index - 1 + quotes.length) % quotes.length;
  }
  function next() {
    if (quotes.length === 0) return;
    index = (index + 1) % quotes.length;
  }
  function goTo(i: number) {
    index = i;
  }

  function startTimer() {
    stopTimer();
    if (!autoRotate || paused || quotes.length < 2) return;
    timer = setInterval(() => {
      index = (index + 1) % quotes.length;
    }, intervalMs);
  }
  function stopTimer() {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  }

  $effect(() => {
    void autoRotate;
    void intervalMs;
    void paused;
    void quotes.length;
    startTimer();
    return stopTimer;
  });

  onMount(() => startTimer());
  onDestroy(() => stopTimer());
</script>

<div
  class="quote-carousel {layoutClasses}"
  data-block="QuoteCarousel" data-block-type="quote_carousel"
  data-block-slug={block._slug}
  onmouseenter={() => (paused = true)}
  onmouseleave={() => (paused = false)}
  role="region"
  aria-roledescription="carousel"
  aria-label={block.headline ?? "Zitat-Karussell"}
>
  {#if block.headline}
    <h3 class="mb-8 text-lg font-semibold">{block.headline}</h3>
  {/if}

  {#if quotes.length === 0}
    <p class="text-sm text-stein-500 italic">Keine Zitate vorhanden.</p>
  {:else}
    <div class="flex items-center gap-1.5 sm:gap-2">
      {#if showArrows && quotes.length > 1}
        <button
          type="button"
          onclick={prev}
          aria-label="Vorheriges Zitat"
          class="shrink-0 inline-flex items-center justify-center size-7 rounded-full bg-white/90 border border-stein-200 shadow-sm hover:bg-white hover:border-wald-700 transition"
        >
          <Icon icon="mdi:chevron-left" class="size-4" aria-hidden="true" />
        </button>
      {/if}

      <div class="grid flex-1 min-w-0">
        {#each quotes as q, i (i)}
          <div
            class="col-start-1 row-start-1 transition-opacity duration-300 {i === index
              ? 'opacity-100'
              : 'pointer-events-none opacity-0'}"
            aria-hidden={i !== index}
          >
            <QuoteBlock block={{ ...(q as QuoteBlockData), variant: "left" }} bare extraClass="py-2" />
          </div>
        {/each}
      </div>

      {#if showArrows && quotes.length > 1}
        <button
          type="button"
          onclick={next}
          aria-label="Nächstes Zitat"
          class="shrink-0 inline-flex items-center justify-center size-7 rounded-full bg-white/90 border border-stein-200 shadow-sm hover:bg-white hover:border-wald-700 transition"
        >
          <Icon icon="mdi:chevron-right" class="size-4" aria-hidden="true" />
        </button>
      {/if}
    </div>

    {#if quotes.length > 1}
      <div class="mt-4 flex justify-center gap-1.5" role="tablist">
        {#each quotes as _, i}
          <button
            type="button"
            role="tab"
            aria-selected={i === index}
            aria-label={`Zitat ${i + 1}`}
            onclick={() => goTo(i)}
            class="size-2 rounded-full transition-colors {i === index
              ? 'bg-wald-700'
              : 'bg-stein-300 hover:bg-stein-400'}"
          ></button>
        {/each}
      </div>
    {/if}
  {/if}
</div>