From 89211b3e22ccdd9f1b01b345345065a809b41009 Mon Sep 17 00:00:00 2001
From: Ivan Kuzmenko <6745157+rndtrash@users.noreply.github.com>
Date: Mon, 29 Sep 2025 22:18:34 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=B1=D0=BB=D0=BE=D0=BA=20=D1=81=20=D0=B8=D0=BD=D1=84?=
 =?UTF-8?q?=D0=BE=D1=80=D0=BC=D0=B0=D1=86=D0=B8=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/IconBlock.svelte    | 18 ++++++++++++++++++
 src/lib/components/InfoBlock.svelte    | 19 +++++++++----------
 src/lib/components/WarningBlock.svelte | 12 ++++++++++++
 3 files changed, 39 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/components/IconBlock.svelte
 create mode 100644 src/lib/components/WarningBlock.svelte

diff --git a/src/lib/components/IconBlock.svelte b/src/lib/components/IconBlock.svelte
new file mode 100644
index 0000000..1d4922a
--- /dev/null
+++ b/src/lib/components/IconBlock.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+
+	export let bgStrong: string;
+	export let bgBleak: string;
+	export let icon: string;
+	export let caption: string;
+</script>
+
+<section class="flex flex-col sm:flex-row">
+	<div class="flex flex-row items-center gap-2 {bgStrong} p-2 text-slate-50">
+		<Icon width={32} height={32} {icon} color={'#f8fafc'} />
+		<span class="sm:hidden">{caption}</span>
+	</div>
+	<div class="{bgBleak} p-4 sm:grow">
+		<slot />
+	</div>
+</section>
diff --git a/src/lib/components/InfoBlock.svelte b/src/lib/components/InfoBlock.svelte
index b93a76b..7635b91 100644
--- a/src/lib/components/InfoBlock.svelte
+++ b/src/lib/components/InfoBlock.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
+	import IconBlock from './IconBlock.svelte';
 </script>
 
-<section class="flex flex-col sm:flex-row">
-	<div class="flex flex-row items-center gap-2 bg-blue-500 p-2 text-slate-50">
-		<Icon width={32} height={32} icon={'material-symbols:info'} color={'#f8fafc'} />
-		<span class="sm:hidden">Обратите внимание</span>
-	</div>
-	<div class="bg-blue-50 p-4 sm:grow">
-		<slot />
-	</div>
-</section>
+<IconBlock
+	bgStrong="bg-blue-500"
+	bgBleak="bg-blue-50"
+	icon="material-symbols:info"
+	caption="Обратите внимание"
+>
+	<slot />
+</IconBlock>
diff --git a/src/lib/components/WarningBlock.svelte b/src/lib/components/WarningBlock.svelte
new file mode 100644
index 0000000..e76765c
--- /dev/null
+++ b/src/lib/components/WarningBlock.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import IconBlock from './IconBlock.svelte';
+</script>
+
+<IconBlock
+	bgStrong="bg-amber-500"
+	bgBleak="bg-amber-50"
+	icon="material-symbols:warning"
+	caption="Внимание"
+>
+	<slot />
+</IconBlock>