38 lines
1.2 KiB
Svelte
38 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { appliedFontsManager } from '$entities/Font';
|
|
import { controlManager } from '$features/SetupFont';
|
|
import { ComparisonSlider } from '$widgets/ComparisonSlider/ui';
|
|
import { cubicOut } from 'svelte/easing';
|
|
import { fly } from 'svelte/transition';
|
|
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">
|
|
<PairSelector />
|
|
</div>
|
|
|
|
{#if fontA && fontB}
|
|
<div in:fly={{ y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 }}>
|
|
<ComparisonSlider
|
|
fontA={fontA}
|
|
fontB={fontB}
|
|
bind:text={displayedText}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|