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

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

        export let topic: Topic;

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

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

<li class="h-entry" title={$_('topic.title')}>
        <span class="p-name">
                <a
                        class="u-url u-uid underline text-blue-600 visited:text-purple-500"
                        title={$_('topic.permalink_title')}
                        href="/t/{topic.id}"
                >
                        {topic.title}
                </a></span
        >
        <span class="topic-ttl"
                >({$_('topic.remaining_time', {
                        values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) }
                })})
        </span>
</li>