<!--
    Component: FontDisplay
    Displays a grid of FontSampler components for each displayed font.
-->
<script>
import { displayedFontsStore } from '../../model';
import FontSampler from '../FontSampler/FontSampler.svelte';
</script>

<div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(500px,1fr))]">
    {#each displayedFontsStore.fonts as font (font.id)}
        <FontSampler font={font} bind:text={displayedFontsStore.text} />
    {/each}
</div>
