Update / use typescript

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

<script lang="ts">
  import { _ } from 'svelte-i18n';
  export let forums;

  $: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
</script>

<ul>
  {#each sortedForums as forum}
    <li>
      <a href="/f/{forum.id}">
        <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
        <span class="navigation-label">{$_(forum.label)}</span>
      </a>
    </li>
  {/each}
</ul>

<style>
	ul {
		padding: 0;
	}

	li {
		display: block;
		text-align: left;
		margin-bottom: 20px;
	}

	.navigation-glyph {
		font-size: 1.5rem;
		display: block;
	}

	.☽ {
		font-size: 2rem;
	}

	a {
		text-decoration: none;
	}
</style>