From 887ca6e5e16643b0364c8383140b6b532bf66d1d Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 27 Feb 2026 18:40:46 +0300
Subject: [PATCH] feat(LayoutSwitch): create a ui component to switch
 SampleList layout

---
 .../ui/LayoutSwitch/LayoutSwitch.svelte       | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte

diff --git a/src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte b/src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte
new file mode 100644
index 0000000..f70d9ae
--- /dev/null
+++ b/src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+import { ButtonGroup } from '$shared/ui';
+import { IconButton } from '$shared/ui';
+import GridIcon from '@lucide/svelte/icons/layout-grid';
+import ListIcon from '@lucide/svelte/icons/stretch-horizontal';
+import { layoutManager } from '../../model';
+
+interface Props {
+    class?: string;
+}
+
+const { class: className }: Props = $props();
+
+function handleClick() {
+    layoutManager.toggleMode();
+}
+</script>
+
+<ButtonGroup class={className}>
+    <IconButton active={layoutManager.mode === 'list'} onclick={handleClick}>
+        {#snippet icon()}
+            <ListIcon class="size-4" />
+        {/snippet}
+    </IconButton>
+    <IconButton active={layoutManager.mode === 'grid'} onclick={handleClick}>
+        {#snippet icon()}
+            <GridIcon class="size-4" />
+        {/snippet}
+    </IconButton>
+</ButtonGroup>