Add svelte frontend

[rbdr/forum] / app / components / forum_list / forum_list.svelte

diff --git a/app/components/forum_list/forum_list.svelte b/app/components/forum_list/forum_list.svelte
new file mode 100644 (file)
index 0000000..905421e
--- /dev/null
+++ b/app/components/forum_list/forum_list.svelte
@@ -0,0 +1,21 @@
+<script>
+  import {forums, addForum} from '../../models/forums.js'
+
+  import { fade } from 'svelte/transition';
+</script>
+
+<aside>
+  <button on:click="{addForum}">Add a Forum</button>
+  <nav>
+    <ul>
+      {#each $forums as forum}
+        <li transition:fade>
+          <a href="/f/{forum.id}">
+            <span class="navigation-kanji">{forum.kanji}</span>
+            <span class="navigation-label">{forum.label}</span>
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </nav>
+</aside>