68 lines
1.8 KiB
Plaintext
68 lines
1.8 KiB
Plaintext
component Blockquote {
|
|
props {
|
|
quote = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
|
|
citation = ""
|
|
citationTitle = ""
|
|
citationUrl = ""
|
|
avatarSrc = ""
|
|
avatarAlt = ""
|
|
size = "md"
|
|
color = "primary"
|
|
align = "left"
|
|
variant = "default"
|
|
quoteMark = true
|
|
italic = true
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<figure
|
|
{...attrs}
|
|
class="wire-next wire-next--blockquote wire-next--color-{color} wire-next--size-{size} {class}"
|
|
data-size="{size}"
|
|
data-color="{color}"
|
|
data-align="{align}"
|
|
data-variant="{variant}"
|
|
data-italic="{italic}"
|
|
>
|
|
<blockquote cite="{citationUrl}">
|
|
{#if quoteMark}
|
|
<span class="wire-next__blockquote-mark" aria-hidden="true">“</span>
|
|
{/if}
|
|
|
|
<div class="wire-next__blockquote-copy">
|
|
{#if quote}
|
|
<p>{quote}</p>
|
|
{:else}
|
|
<slot />
|
|
{/if}
|
|
</div>
|
|
</blockquote>
|
|
|
|
{#if citation || citationTitle || avatarSrc}
|
|
<figcaption class="wire-next__blockquote-citation">
|
|
{#if avatarSrc}
|
|
<img
|
|
class="wire-next__blockquote-avatar"
|
|
src="{avatarSrc}"
|
|
alt="{avatarAlt}"
|
|
loading="lazy"
|
|
/>
|
|
{/if}
|
|
|
|
<span class="wire-next__blockquote-attribution">
|
|
{#if citation}
|
|
{#if citationUrl}
|
|
<cite><a href="{citationUrl}">{citation}</a></cite>
|
|
{:else}
|
|
<cite>{citation}</cite>
|
|
{/if}
|
|
{/if}
|
|
{#if citationTitle}<span>{citationTitle}</span>{/if}
|
|
</span>
|
|
</figcaption>
|
|
{/if}
|
|
</figure>
|
|
}
|
|
}
|