TeaSanctuary/teasanctuary.ru
4
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

Разделил блок с информацией

Browse source
This commit is contained in:
Иван Кузьменко 2025-09-29 22:18:34 +03:00
parent 84512c7a9b
commit 89211b3e22
3 changed files with 39 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/lib/components/IconBlock.svelte Normal file
View file

@ -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>

19
src/lib/components/InfoBlock.svelte
View file

@ -1,13 +1,12 @@
<script lang="ts"> <script lang="ts">
import Icon from '@iconify/svelte'; import IconBlock from './IconBlock.svelte';
</script> </script>
<section class="flex flex-col sm:flex-row"> <IconBlock
<div class="flex flex-row items-center gap-2 bg-blue-500 p-2 text-slate-50"> bgStrong="bg-blue-500"
<Icon width={32} height={32} icon={'material-symbols:info'} color={'#f8fafc'} /> bgBleak="bg-blue-50"
<span class="sm:hidden">Обратите внимание</span> icon="material-symbols:info"
</div> caption="Обратите внимание"
<div class="bg-blue-50 p-4 sm:grow"> >
<slot /> <slot />
</div> </IconBlock>
</section>

12
src/lib/components/WarningBlock.svelte Normal file
View file

@ -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>