pages/src/lib/components/callout.svelte

<script lang="ts">
    let {
        content,
        type,
    }: {
        content: string[];
        
        // valid values: warn, quote, info. defaults to warn
        type: string;
    } = $props();
</script>

{#snippet calloutContent()}
    <p class="callout-symbol">
        {#if type == "quote"}
            »
        {:else if type == "info"}
            i
        {:else}
            !
        {/if}
    </p>
    <div class="callout-text-container">
        {#each content as p}
            {#if type == "quote"}
                <p class="callout-quote-text">"{@html p}"</p>
            {:else}
                <p class="callout-text">{@html p}</p>
            {/if}
        {/each}
    </div>
{/snippet}

{#if type == "quote"}
    <div class="callout-container callout-quote">
        {@render calloutContent()}
    </div>
{:else if type == "info"}
    <div class="callout-container callout-info">
        {@render calloutContent()}
    </div>
{:else}
    <div class="callout-container callout-warn">
        {@render calloutContent()}
    </div>
{/if}

<style>
    .callout-warn {
        --color-callout: var(--color-callout-warn);
    }

    .callout-quote {
        --color-callout: var(--color-callout-quote);
    }

    .callout-info {
        --color-callout: var(--color-callout-info);
    }

    .callout-container {
        --color-callout-background: color-mix(in srgb, var(--color-callout) 30%, transparent);
        display: flex;
        flex-direction: row;
        max-width: 800px;
        margin: 12px auto 0;
        align-items: center;
        border: var(--border-style) var(--border-dash-size) var(--color-callout);
        background-color: var(--color-callout-background);
        backdrop-filter: blur(var(--blur-radius-background));
        border-radius: var(--border-radius);
        padding: 16px;
        gap: 16px;
        box-sizing: border-box;
    }

    .callout-symbol {
        font-family: var(--font-mono);
        font-size: 4.0rem;
        font-weight: 700;
        /* font-style: italic; */
    }

    :global {
        .callout-text, .callout-text-container * {
            margin: 0;
            font-size: 1.0rem;
            line-height: 1.4rem;
        }
}

    .callout-quote-text {
        font-style: italic;
    }

    .callout-text-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
</style>