Use supabase

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

diff --git a/src/lib/components/forum_list/forum_list.svelte b/src/lib/components/forum_list/forum_list.svelte
index 81a5e4f8de5693037ea8076d30369fdfcf1900d0..d1518bdd6ec90840802a419cf4ab952beae29f02 100644 (file)
--- a/src/lib/components/forum_list/forum_list.svelte
+++ b/src/lib/components/forum_list/forum_list.svelte
@@ -1,15 +1,19 @@
 <script lang="ts">
-       import { _ } from 'svelte-i18n';
-       export let forums;
+       import type { Forum } from '$lib/data/types';
+
+       export let forums: Forum[];
 
-       $: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
+       import { _ } from 'svelte-i18n';
+  $: sortedForums = forums
+  .slice()
+  .sort((a, b) => a.position - b.position);
 </script>
 
-<ul>
+<ul class="p-0 pl-2">
        {#each sortedForums as forum}
-               <li>
-                       <a href="/f/{forum.id}">
-                               <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
+               <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>
@@ -17,26 +21,7 @@
 </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>