frontend-svelte/src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte

<!--
    Component: LayoutSwitch
    Toggles between list and grid layout modes
-->
<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 { getLayoutManager } from '../../model';

interface Props {
    /**
     * CSS classes
     */
    class?: string;
}

const { class: className }: Props = $props();

const layoutManager = getLayoutManager();
const mode = $derived(layoutManager.mode);

function handleClick() {
    layoutManager.toggleMode();
}
</script>

<ButtonGroup class={className}>
    <IconButton active={mode === 'list'} onclick={handleClick}>
        {#snippet icon()}
            <ListIcon class="size-4" />
        {/snippet}
    </IconButton>
    <IconButton active={mode === 'grid'} onclick={handleClick}>
        {#snippet icon()}
            <GridIcon class="size-4" />
        {/snippet}
    </IconButton>
</ButtonGroup>