feat(LayoutSwitch): create a ui component to switch SampleList layout
This commit is contained in:
30
src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte
Normal file
30
src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user