29 lines
943 B
Svelte
29 lines
943 B
Svelte
|
<script lang="ts">
|
||
|
|
import { appliedFontsManager } from '$entities/Font';
|
||
|
|
import { Input } from '$shared/shadcn/ui/input';
|
||
|
|
import { ComparisonSlider } from '$shared/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 => font.id));
|
||
|
|
});
|
||
|
|
</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} text={displayedText} />
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
{/if}
|