[rbdr/forum] / src / lib / components / forum_list / forum_list.svelte

<script lang="ts">
        import type { Forum } from '$lib/data/types';

        export let forums: Forum[];

        import { _ } from 'svelte-i18n';
        $: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
</script>

<ul class="p-0 pl-2">
        {#each sortedForums as forum}
                <li class="block text-left mb-5">
                        <a class="no-underline text-blue-600 visited:text-purple-500" href="/f/{forum.id}">
                                <span aria-hidden="true" class="block text-2xl {forum.glyph}">{forum.glyph}</span>
                                <span class="navigation-label">{$_(forum.label)}</span>
                        </a>
                </li>
        {/each}
</ul>

<style>
        .☽ {
                font-size: 2rem;
        }
</style>