frontend-svelte/src/features/DisplayFont/ui/FontComparer/FontComparer.svelte

<script lang="ts">
import { appliedFontsManager } from '$entities/Font';
import { controlManager } from '$features/SetupFont';
import { Input } from '$shared/shadcn/ui/input';
import { ComparisonSlider } from '$widgets/ComparisonSlider/ui';
import { displayedFontsStore } from '../../model';
import PairSelector from '../PairSelector/PairSelector.svelte';

let displayedText = $state('The quick brown fox jumps over the lazy dog...');
const [fontA, fontB] = $derived(displayedFontsStore.selectedPair);
const hasAnyPairs = $derived(displayedFontsStore.fonts.length > 0);

$effect(() => {
    appliedFontsManager.touch(
        displayedFontsStore.fonts.map(font => ({ slug: font.id, weight: controlManager.weight })),
    );
});
</script>

{#if hasAnyPairs}
    <div class="flex flex-col gap-4">
        <div class="flex flex-row gap-4">
            <Input bind:value={displayedText} />
            <PairSelector />
        </div>

        {#if fontA && fontB}
            <ComparisonSlider
                fontA={fontA}
                fontB={fontB}
                bind:text={displayedText}
            />
        {/if}
    </div>
{/if}