moved gamedev webring component to generic webring component

src/lib/webrings/ring.svelte

@@ -0,0 +1,77 @@
+<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 auto;
+    }
+    a {
+        margin: 0 4px;
+        text-decoration: none;
+        font-size: 1.0rem;
+        line-height: 1.4rem;
+        transition: color 0.1s ease-out, font-weight 0.1s 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>