feat(quote): enhance QuoteBlock and QuoteCarouselBlock components

- Updated QuoteBlock to support a new "center" variant for text alignment.
- Modified QuoteCarouselBlock to include an option for displaying navigation arrows.
- Enhanced type definitions for quote-related data structures to accommodate new features.
- Improved styling and layout handling for better visual presentation of quotes.

src/lib/components/blocks/QuoteBlock.svelte

@@ -2,17 +2,36 @@
   import { getBlockLayoutClasses } from "$lib/block-layout";
   import type { QuoteBlockData } from "$lib/block-types";
 
-  let { block }: { block: QuoteBlockData } = $props();
+  let {
+    block,
+    bare = false,
+    extraClass = "",
+  }: { block: QuoteBlockData; bare?: boolean; extraClass?: string } = $props();
 
   const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
-  const variantClass = $derived(block.variant === "right" ? "text-right" : "text-left");
+  const isCenter = $derived(block.variant === "center");
+  const alignClass = $derived(
+    isCenter ? "text-center" : block.variant === "right" ? "text-right" : "text-left",
+  );
+  const borderClass = $derived(isCenter ? "" : "border-l-4 border-green-700 pl-4");
 </script>
 
-<div class={layoutClasses} data-block-type="quote" data-block-slug={block._slug}>
-  <blockquote class="border-l-4 border-green-700 pl-4 {variantClass}">
-    <p class="text-lg italic text-zinc-700">"{block.quote ?? ""}"</p>
+{#snippet quoteMarkup()}
+  <blockquote
+    data-block-type="quote"
+    class="{borderClass} {alignClass} {extraClass}"
+  >
+    <p class="text-lg text-zinc-700 mb-2!">"{block.quote ?? ""}"</p>
     {#if block.author}
-      <cite class="mt-1 block not-italic text-sm text-zinc-500">— {block.author}</cite>
+      <cite class="mt-1 block not-italic text-xs text-zinc-400">{block.author}</cite>
     {/if}
   </blockquote>
-</div>
+{/snippet}
+
+{#if bare}
+  {@render quoteMarkup()}
+{:else}
+  <div class={layoutClasses} data-block-type="quote" data-block-slug={block._slug}>
+    {@render quoteMarkup()}
+  </div>
+{/if}

src/lib/components/blocks/QuoteCarouselBlock.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { onMount, onDestroy } from "svelte";
-  import { fade } from "svelte/transition";
   import Icon from "@iconify/svelte";
   import "$lib/iconify-offline";
   import { getBlockLayoutClasses } from "$lib/block-layout";
-  import type { QuoteCarouselBlockData } from "$lib/block-types";
+  import type { QuoteBlockData, QuoteCarouselBlockData } from "$lib/block-types";
+  import QuoteBlock from "./QuoteBlock.svelte";
 
-  type QuoteItem = { quote?: string; author?: string; variant?: "left" | "right" };
+  type QuoteItem = { quote?: string; author?: string; variant?: "left" | "right" | "center" };
 
   let { block }: { block: QuoteCarouselBlockData } = $props();
 
@@ -18,6 +18,7 @@
     ),
   );
   const autoRotate = $derived(block.autoRotate !== false);
+  const showArrows = $derived(block.showArrows === true);
   const intervalMs = $derived(
     Math.max(2, block.intervalSeconds ?? 6) * 1000,
   );
@@ -26,11 +27,6 @@
   let timer: ReturnType<typeof setInterval> | null = null;
   let paused = $state(false);
 
-  const current = $derived(quotes[index] ?? null);
-  const variantClass = $derived(
-    current?.variant === "right" ? "text-right" : "text-left",
-  );
-
   function prev() {
     if (quotes.length === 0) return;
     index = (index - 1 + quotes.length) % quotes.length;
@@ -87,42 +83,39 @@
   {#if quotes.length === 0}
     <p class="text-sm text-zinc-500 italic">Keine Zitate vorhanden.</p>
   {:else}
-    <div class="flex items-center gap-2 sm:gap-4">
-      {#if quotes.length > 1}
+    <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-9 rounded-full bg-white/90 border border-zinc-200 shadow-sm hover:bg-white hover:border-green-700 transition"
+          class="shrink-0 inline-flex items-center justify-center size-7 rounded-full bg-white/90 border border-zinc-200 shadow-sm hover:bg-white hover:border-green-700 transition"
         >
-          <Icon icon="mdi:chevron-left" class="size-5" aria-hidden="true" />
+          <Icon icon="mdi:chevron-left" class="size-4" aria-hidden="true" />
         </button>
       {/if}
 
-      <div class="relative flex-1 min-h-[6rem]">
-        {#key index}
-          <blockquote
-            in:fade={{ duration: 300 }}
-            class="absolute inset-0 border-l-4 border-green-700 pl-6 py-2 {variantClass}"
+      <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}
           >
-            <p class="text-lg italic text-zinc-700">"{current?.quote ?? ""}"</p>
-            {#if current?.author}
-              <cite class="mt-2 block not-italic text-sm text-zinc-500">
-                — {current.author}
-              </cite>
-            {/if}
-          </blockquote>
-        {/key}
+            <QuoteBlock block={{ ...(q as QuoteBlockData), variant: "left" }} bare extraClass="py-2" />
+          </div>
+        {/each}
       </div>
 
-      {#if quotes.length > 1}
+      {#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-9 rounded-full bg-white/90 border border-zinc-200 shadow-sm hover:bg-white hover:border-green-700 transition"
+          class="shrink-0 inline-flex items-center justify-center size-7 rounded-full bg-white/90 border border-zinc-200 shadow-sm hover:bg-white hover:border-green-700 transition"
         >
-          <Icon icon="mdi:chevron-right" class="size-5" aria-hidden="true" />
+          <Icon icon="mdi:chevron-right" class="size-4" aria-hidden="true" />
         </button>
       {/if}
     </div>