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

<!--
    Component: SetupFontMenu
    Contains controls for setting up font properties.
-->
<script lang="ts">
import type { ResponsiveManager } from '$shared/lib';
import { ComboControl } from '$shared/ui';
import { getContext } from 'svelte';
import { controlManager } from '../model';
const responsive = getContext<ResponsiveManager>('responsive');

$effect(() => {
    if (!responsive) {
        return;
    }

    switch (true) {
        case responsive.isMobile:
            controlManager.multiplier = 0.5;
            break;
        case responsive.isTablet:
            controlManager.multiplier = 0.75;
            break;
        case responsive.isDesktop:
            controlManager.multiplier = 1;
            break;
        default:
            controlManager.multiplier = 1;
            break;
    }
});
</script>

<div class="sm:py-2 sm:px-10 flex flex-row items-center gap-2">
    <div class="flex flex-row gap-3">
        {#each controlManager.controls as control (control.id)}
            <ComboControl
                control={control.instance}
                increaseLabel={control.increaseLabel}
                decreaseLabel={control.decreaseLabel}
                controlLabel={control.controlLabel}
                reduced={responsive.isMobile}
            />
        {/each}
    </div>
</div>