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

<script lang="ts">
        import type { Topic } from '$lib/data/types';

        export let topic: Topic;

        import { _ } from 'svelte-i18n';
        import Post from '$lib/components/post/post.svelte';
        import { readableTime } from '$lib/utils/readable_time';

        $: remainingTime = new Date(topic.updated_at).getTime() + topic.ttl - Date.now();
        $: remaining = readableTime(remainingTime);
</script>

<div class="h-entry" title={$_('topic.title')}>
        <h1 class="py-4 font-bold text-3xl 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 underline text-blue-600 visited:text-purple-500"
                                >
                                        {topic.forum.glyph}
                                        {$_(topic.forum.label)}
                                </a>.
                        </span>
                {/if}
                <span class="topic-ttl">
                        <a
                                class="u-url u-uid underline text-blue-600 visited:text-purple-500"
                                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}
                <aside class="topic-tags" title={$_('topic.tags_title')}>
                        {$_('topic.tags_location')}
                        {#each topic.tags as tag}
                                <a href="/g/{tag.tag}" class="p-category underline text-blue-600 visited:text-purple-500">
                                        {tag.tag}<span class="tag-weight">({tag.count})</span></a
                                >{' '}
                        {/each}
                </aside>
        {/if}
        {#if topic.posts}
                {#each topic.posts as post, index}
                        <Post {post} {index} count={topic.posts.length} />
                {/each}
        {/if}
</div>