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

<!--
    Component: FontSampler
    Displays a sample text with a given font in a contenteditable element.
-->
<script lang="ts">
import {
    FontApplicator,
    type UnifiedFont,
    selectedFontsStore,
} from '$entities/Font';
import { controlManager } from '$features/SetupFont';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import {
    ContentEditable,
    IconButton,
} from '$shared/ui';
import MinusIcon from '@lucide/svelte/icons/minus';

interface Props {
    /**
     * Font info
     */
    font: UnifiedFont;
    /**
     * Text to display
     */
    text: string;
    /**
     * Font settings
     */
    fontSize?: number;
    lineHeight?: number;
    letterSpacing?: number;
}

let {
    font,
    text = $bindable(),
    ...restProps
}: Props = $props();

const fontWeight = $derived(controlManager.weight);
const fontSize = $derived(controlManager.size);
const lineHeight = $derived(controlManager.height);
const letterSpacing = $derived(controlManager.spacing);

function removeSample() {
    selectedFontsStore.removeOne(font.id);
}
</script>

<div
    class="
        w-full h-full rounded-xl
        bg-white border border-slate-200
        shadow-sm dark:border-slate-800 dark:bg-slate-950
    "
    style:font-weight={fontWeight}
>
    <div class="mx-3 p-1.5 pr-0 border-b border-slate-200 flex items-center justify-between">
        <span class="text-[0.5rem] font-mono uppercase tracking-widest text-slate-900">
            {font.name}
        </span>
        <IconButton onclick={removeSample}>
            {#snippet icon({ className })}
                <MinusIcon class={cn(className, 'stroke-red-500 group-hover:stroke-red-500')} />
            {/snippet}
        </IconButton>
    </div>
    <div class="p-6">
        <FontApplicator id={font.id} name={font.name}>
            <ContentEditable
                bind:text={text}
                {...restProps}
                fontSize={fontSize}
                lineHeight={lineHeight}
                letterSpacing={letterSpacing}
            />
        </FontApplicator>
    </div>
</div>