pages/src/lib/components/ring.svelte

<script lang="ts">
    let {
        ringName,
        ringLink,
        prevLink,
        nextLink,
        randLink,
        listLink,
        prevSymbol,
        nextSymbol,
        highlightEmojiLeft,
        highlightEmojiRight,
    }: {
        ringName: string;
        ringLink: string;
        prevLink: string;
        nextLink: string;
        randLink?: string;
        listLink?: string;
        prevSymbol: string;
        nextSymbol: string;

        // Emoji to be used as highlight next to the title
        highlightEmojiLeft: string;

        /** 
         * Emoji to be used as highlight to the right of the title. If
         * not set, will default to highlightEmojiLeft.
         */
        highlightEmojiRight?: string;
    } = $props();
</script>

<div class="webring-container">
    <div class="webring-row">
        <span>〔</span>
        <a href="{ringLink}">{highlightEmojiLeft} {ringName} {highlightEmojiRight ?? highlightEmojiLeft}</a>
        <span>〕</span>
    </div>
    <div class="webring-row">
        <span>〔</span>
        <a href="{prevLink}">{prevSymbol} prev</a>
        {#if randLink}
            <a href="{randLink}">rand</a>
        {/if}
        {#if listLink}
            <a href="{listLink}">list</a>
        {/if}
        <a href="{nextLink}">next {nextSymbol}</a>
        <span>〕</span>
    </div>
</div>

<style>
    .webring-container {
        display: flex;
        width: fit-content;
        flex-direction: column;
        align-items: center;
        margin: 0 4px;
    }
    a {
        margin: 0 4px;
        text-decoration: none;
        font-size: 1.0rem;
        line-height: 1.4rem;
        font-weight: 500;
        /* border: var(--border-width); */
        transition: color var(--duration-animation) var(--anim-curve),
                    font-weight var(--duration-animation) var(--anim-curve);
                    /* border-color var(--duration-animation) var(--anim-curve); */
    }
    a:link, a:visited, span {
        color: var(--color-highlight);
    }
    a:hover {
        color: var(--color-highlight-alt);
        text-decoration: inherit;
    }
    .webring-row {
        font-family: var(--font-mono);
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
    span {
        margin: 0;
        font-weight: bold;
        font-size: 1.0rem;
        line-height: 1.4rem;
    }
</style>