Add tag component:

2 files changed, 28 insertions, 1 deletions

diff --git a/src/components/tag/tag.svelte b/src/components/tag/tag.svelte
new file mode 100644
index 0000000..a14cd19
--- /dev/null
+++ b/src/components/tag/tag.svelte
@@ -0,0 +1,27 @@
+<script>
+  export let id;
+
+  import { _ } from 'svelte-i18n';
+  import { getTag } from '$/stores/tag';
+  import ErrorBlock from '$/components/error_block/error_block.svelte';
+  import Loader from '$/components/loader/loader.svelte';
+  import TopicSummary from '$/components/topic_summary/topic_summary.svelte';
+
+  $: store = getTag(id);
+  $: tag = $store.data;
+</script>
+
+{#if $store.loading}
+  <Loader />
+{/if}
+{#if $store.error}
+  <ErrorBlock message={$_('tag.error.unavailable')} />
+{/if}
+{#if tag}
+  <h1>{$_('tag.title')} {tag.id}</h1>
+  <ul>
+    {#each tag.topics as topic}
+      <TopicSummary topic={topic} />
+    {/each}
+  </ul>
+{/if}
diff --git a/src/components/topic_summary/topic_summary.svelte b/src/components/topic_summary/topic_summary.svelte
index deef3e2..88b2b83 100644
--- a/src/components/topic_summary/topic_summary.svelte
+++ b/src/components/topic_summary/topic_summary.svelte
@@ -2,7 +2,7 @@
   export let topic;
 
   import { _ } from 'svelte-i18n';
-  import { readableTime } from '../../utils/readable_time.js';
+  import { readableTime } from '$/utils/readable_time.js';
 
   $: remainingTime = (topic.updated_at + topic.ttl) - Date.now();
   $: remaining = readableTime(remainingTime);