frontend-svelte/src/features/SetupFont/ui/SetupFontMenu.svelte

<script lang="ts">
import * as Item from '$shared/shadcn/ui/item';
import { Separator } from '$shared/shadcn/ui/separator/index';
import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
import ComboControl from '$shared/ui/ComboControl/ComboControl.svelte';
import { fontSizeStore } from '../model/stores/fontSizeStore';
import { fontWeightStore } from '../model/stores/fontWeightStore';
import { lineHeightStore } from '../model/stores/lineHeightStore';

const fontSize = $derived($fontSizeStore);
const fontWeight = $derived($fontWeightStore);
const lineHeight = $derived($lineHeightStore);
</script>

<div class="w-full p-2 flex flex-row items-center">
    <Sidebar.Trigger />
    <Separator orientation="vertical" class="h-full" />
    <ComboControl
        value={fontSize.value}
        minValue={fontSize.min}
        maxValue={fontSize.max}
        onChange={fontSizeStore.setValue}
        onIncrease={fontSizeStore.increase}
        onDecrease={fontSizeStore.decrease}
        increaseDisabled={fontSizeStore.isAtMax()}
        decreaseDisabled={fontSizeStore.isAtMin()}
        increaseLabel="Increase Font Size"
        decreaseLabel="Decrease Font Size"
    />
    <ComboControl
        value={fontWeight.value}
        minValue={fontWeight.min}
        maxValue={fontWeight.max}
        onChange={fontWeightStore.setValue}
        onIncrease={fontWeightStore.increase}
        onDecrease={fontWeightStore.decrease}
        increaseDisabled={fontWeightStore.isAtMax()}
        decreaseDisabled={fontWeightStore.isAtMin()}
        increaseLabel="Increase Font Weight"
        decreaseLabel="Decrease Font Weight"
    />
    <ComboControl
        value={lineHeight.value}
        minValue={lineHeight.min}
        maxValue={lineHeight.max}
        step={lineHeight.step}
        onChange={lineHeightStore.setValue}
        onIncrease={lineHeightStore.increase}
        onDecrease={lineHeightStore.decrease}
        increaseDisabled={lineHeightStore.isAtMax()}
        decreaseDisabled={lineHeightStore.isAtMin()}
        increaseLabel="Increase Line Height"
        decreaseLabel="Decrease Line Height"
    />
</div>