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>

src/routes/blog/[slug]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import DateWidget from '$src/lib/components/DateWidget.svelte';
 	import InfoBlock from '$src/lib/components/InfoBlock.svelte';
 	import type { PageData } from './$types';
 	import Icon from '@iconify/svelte';
@@ -33,29 +34,9 @@
 		? 'bg-amber-50 text-slate-950'
 		: 'bg-red-500 text-slate-50'} sm:flex-row sm:flex-nowrap sm:gap-5"
 >
-	<div class="flex items-center">
+	<DateWidget dateString={data.blogPost.date} type="published" />
-		<Icon icon="material-symbols:calendar-today" class="mr-3" width={24} height={24} />
-		<p>
-			{data.blogPost.date
-				? new Date(data.blogPost.date).toLocaleString(undefined, {
-						month: 'short',
-						day: 'numeric',
-						year: 'numeric'
-					})
-				: 'Не опубликован!'}
-		</p>
-	</div>
 	{#if data.blogPost.dateChanged}
-		<div class="flex items-center font-bold">
+		<DateWidget dateString={data.blogPost.dateChanged} type="updated" />
-			<Icon icon="material-symbols:update" class="mr-3" width={24} height={24} />
-			<p>
-				{new Date(data.blogPost.dateChanged).toLocaleString(undefined, {
-					month: 'short',
-					day: 'numeric',
-					year: 'numeric'
-				})}
-			</p>
-		</div>
 	{/if}
 </section>
 
@@ -80,8 +61,8 @@
 		prose-headings:mb-4
 		prose-headings:font-bold prose-headings:text-slate-950 prose-h1:text-2xl
 		prose-h1:sm:text-4xl prose-h2:text-xl
-		prose-h2:sm:text-3xl mx-auto
+		prose-h2:sm:text-3xl prose-p:text-justify
-		prose-p:text-justify
+		mx-auto
 		w-5xl
 		p-4
 		text-base