From 3c55a37ed88493d034a0bee847f90624a90cc2ec Mon Sep 17 00:00:00 2001
From: Ivan Kuzmenko <6745157+rndtrash@users.noreply.github.com>
Date: Tue, 30 Sep 2025 06:59:47 +0300
Subject: [PATCH] =?UTF-8?q?=D0=92=D0=B8=D0=B4=D0=B6=D0=B5=D1=82=20=D0=B4?=
 =?UTF-8?q?=D0=B0=D1=82=D1=8B=20=D0=BF=D1=83=D0=B1=D0=BB=D0=B8=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D0=B8=20=D0=B8=D0=BB=D0=B8=20=D0=BE=D0=B1=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/DateWidget.svelte | 32 ++++++++++++++++++++++++++++
 src/routes/blog/[slug]/+page.svelte  | 29 +++++--------------------
 2 files changed, 37 insertions(+), 24 deletions(-)
 create mode 100644 src/lib/components/DateWidget.svelte

diff --git a/src/lib/components/DateWidget.svelte b/src/lib/components/DateWidget.svelte
new file mode 100644
index 0000000..337868d
--- /dev/null
+++ b/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>
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index dbd0f2d..0ac6d22 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/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">
-		<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>
+	<DateWidget dateString={data.blogPost.date} type="published" />
 	{#if data.blogPost.dateChanged}
-		<div class="flex items-center font-bold">
-			<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>
+		<DateWidget dateString={data.blogPost.dateChanged} type="updated" />
 	{/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-p:text-justify
+		prose-h2:sm:text-3xl prose-p:text-justify
+		mx-auto
 		w-5xl
 		p-4
 		text-base