49 lines
1.3 KiB
Svelte
49 lines
1.3 KiB
Svelte
<script lang="ts">
|
||
import Icon from '@iconify/svelte';
|
||
import { dateFormatLong, dateFormatShort } from '$lib/util/Dates';
|
||
|
||
let {
|
||
dateString,
|
||
type = undefined,
|
||
highlight = false,
|
||
showTime = false,
|
||
class: className = ''
|
||
}: {
|
||
dateString?: string;
|
||
type?: 'published' | 'updated' | 'eventStart' | 'eventFinish';
|
||
highlight?: boolean;
|
||
showTime?: boolean;
|
||
class?: string;
|
||
} = $props();
|
||
|
||
const typeToIcon = {
|
||
published: 'material-symbols:calendar-today',
|
||
updated: 'material-symbols:update',
|
||
eventStart: 'material-symbols:rocket-launch',
|
||
eventFinish: 'material-symbols:sports-score'
|
||
};
|
||
|
||
const icon = type ? typeToIcon[type] : undefined;
|
||
|
||
const highlightClasses = (classes: string) => (highlight ? classes : '');
|
||
</script>
|
||
|
||
<div
|
||
class="flex flex-nowrap items-center gap-2 p-1 text-lg font-bold {className} rounded-lg
|
||
{highlightClasses(
|
||
type === 'published' ? 'bg-amber-600' : type === 'updated' ? 'bg-purple-600' : ''
|
||
)}
|
||
{highlightClasses(
|
||
type === 'eventStart' ? 'bg-rose-600' : type === 'eventFinish' ? 'bg-teal-600' : ''
|
||
)}
|
||
{highlightClasses('text-slate-50')}"
|
||
>
|
||
{#if icon}
|
||
<Icon {icon} width={28} height={28} />
|
||
{/if}
|
||
<span class="text-nowrap">
|
||
{dateString
|
||
? (showTime ? dateFormatLong : dateFormatShort).format(new Date(dateString))
|
||
: 'Не опубликован!'}
|
||
</span>
|
||
</div>
|