diff options
Diffstat (limited to 'src/lib/components/topic/topic.svelte')
| -rw-r--r-- | src/lib/components/topic/topic.svelte | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/src/lib/components/topic/topic.svelte b/src/lib/components/topic/topic.svelte new file mode 100644 index 0000000..06f2aeb --- /dev/null +++ b/src/lib/components/topic/topic.svelte @@ -0,0 +1,44 @@ +<script lang="ts"> + export let topic; + + import { _ } from 'svelte-i18n'; + import Post from '$lib/components/post/post.svelte'; + import { readableTime } from '$lib/utils/readable_time'; + + $: remainingTime = topic.updated_at + topic.ttl - Date.now(); + $: remaining = readableTime(remainingTime); +</script> + +<div class="h-entry" title={$_('topic.title')}> + <h1 class="p-name">{topic.title}</h1> + <aside class="topic-meta" title={$_('topic.metadata_title')}> + {#if topic.forum} + <span class="topic-location"> + {$_('topic.category_location')} + <a href="/f/{topic.forum.id}" class="p-category"> + {topic.forum.glyph} {$_(topic.forum.label)} + </a>. + </span> + {/if} + <span class="topic-ttl"> + <a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}"> + ({$_('topic.remaining_time', { + values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) } + })}) + </a>. + </span> + </aside> + {#if topic.tags.length > 0} + <aside class="topic-tags" title={$_('topic.tags_title')}> + {$_('topic.tags_location')} + {#each topic.tags as tag} + <a href="/g/{tag.id}" class="p-category"> + {tag.id}<span class="tag-weight">({tag.weight})</span> + </a>{' '} + {/each} + </aside> + {/if} + {#each topic.posts as post, index} + <Post {post} {index} count={topic.posts.length} /> + {/each} +</div> |