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>