pages/src/lib/components/ring.svelte

<script lang="ts">
    let {
        ringLink,
        prevLink,
        nextLink,
        randLink,
        listLink,
        prevSymbol,
        nextSymbol,
        highlightEmoji,
    }: {
        ringLink: string;
        prevLink: string;
        nextLink: string;
        randLink?: string;
        listLink?: string;
        prevSymbol: string;
        nextSymbol: string;
        highlightEmoji: string;
    } = $props();
</script>

<div class="webring-container">
    <div class="webring-row">
        <span>〔</span>
        <a href="{ringLink}">{highlightEmoji} GAMEDEV WEBRING {highlightEmoji}</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: 16px 4px;
    }
    a {
        margin: 0 4px;
        text-decoration: none;
        font-size: 1.0rem;
        line-height: 1.4rem;
        transition: color var(--duration-animation) ease-out, font-weight var(--duration-animation) ease-out;
    }
    a:link, a:visited, span {
        color: var(--color-highlight);
    }
    a:hover {
        font-weight: 600;
        color: var(--color-highlight-alt);
    }
    .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>