Виджет даты публикации или обновления

src/lib/components/DateWidget.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+
+	let className: string = '';
+	export { className as class };
+
+	export let dateString: string | undefined;
+	export let type: 'published' | 'updated' = 'published';
+	export let highlight = false;
+
+	const icon =
+		type == 'published' ? 'material-symbols:calendar-today' : 'material-symbols:update';
+
+	const highlightClasses = (classes: string) => (highlight ? classes : '');
+</script>
+
+<div
+	class="flex items-center gap-2 p-1 text-lg font-bold {className} rounded-lg
+    {highlightClasses(type == 'published' ? 'bg-amber-600' : 'bg-purple-600')}
+    {highlightClasses('text-slate-50')}"
+>
+	<Icon {icon} width={28} height={28} />
+	<span>
+		{dateString
+			? new Date(dateString).toLocaleString(undefined, {
+					month: 'short',
+					day: 'numeric',
+					year: 'numeric'
+				})
+			: 'Не опубликован!'}
+	</span>
+</div>