Peter Meier
35 lines
1.1 KiB
Svelte
35 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { getBlockLayoutClasses } from "$lib/block-layout";
|
|
import type { QuoteBlockData } from "$lib/block-types";
|
|
|
|
let {
|
|
block,
|
|
bare = false,
|
|
extraClass = "",
|
|
}: { block: QuoteBlockData; bare?: boolean; extraClass?: string } = $props();
|
|
|
|
const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
|
|
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>
|
|
|
|
{#snippet quoteMarkup()}
|
|
<blockquote 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-xs text-zinc-400">{block.author}</cite>
|
|
{/if}
|
|
</blockquote>
|
|
{/snippet}
|
|
|
|
{#if bare}
|
|
{@render quoteMarkup()}
|
|
{:else}
|
|
<div class={layoutClasses} data-block-type="quote" data-block-slug={block._slug}>
|
|
{@render quoteMarkup()}
|
|
</div>
|
|
{/if}
|