31 lines
836 B
Svelte
31 lines
836 B
Svelte
|
<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>
|