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,
} from '$entities/Font';
import { controlManager } from '$features/SetupFont';
import {
    ContentEditable,
    Footnote,
    // IconButton,
} from '$shared/ui';
// import XIcon from '@lucide/svelte/icons/x';

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

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

const fontWeight = $derived(controlManager.weight);
const fontSize = $derived(controlManager.renderedSize);
const lineHeight = $derived(controlManager.height);
const letterSpacing = $derived(controlManager.spacing);
</script>

<div
    class="
        w-full h-full rounded-xl sm:rounded-2xl
        flex flex-col
        backdrop-blur-md bg-background-80
        border border-border-muted
        shadow-[0_1px_3px_rgba(0,0,0,0.04)]
        relative overflow-hidden
    "
    style:font-weight={fontWeight}
>
    <div class="px-4 sm:px-5 md:px-6 py-2.5 sm:py-3 border-b border-border-subtle flex items-center justify-between">
        <div class="flex items-center gap-2 sm:gap-2.5">
            <Footnote>
                typeface_{String(index).padStart(3, '0')}
            </Footnote>
            <div class="w-px h-2 sm:h-2.5 bg-border-subtle"></div>
            <Footnote class="tracking-[0.15em] font-bold text-foreground">
                {font.name}
            </Footnote>
        </div>

        <!--
            <IconButton
                onclick={removeSample}
                class="w-5 h-5 rounded-full hover:bg-transparent flex items-center justify-center transition-colors group translate-x-1/2 cursor-pointer"
            >
                {#snippet icon({ className })}
                    <XIcon class={className} />
                {/snippet}
            </IconButton>
        -->
    </div>

    <div class="p-4 sm:p-5 md:p-8 relative z-10">
        <FontApplicator {font} weight={fontWeight}>
            <ContentEditable
                bind:text={text}
                {...restProps}
                fontSize={fontSize}
                lineHeight={lineHeight}
                letterSpacing={letterSpacing}
            />
        </FontApplicator>
    </div>

    <div class="px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 border-t border-border-subtle w-full flex flex-row gap-2 sm:gap-4 bg-background mt-auto">
        <Footnote class="text-[7px] sm:text-[8px] tracking-wider ml-auto">
            SZ:{fontSize}PX
        </Footnote>
        <div class="w-px h-2 sm:h-2.5 self-center bg-border-subtle hidden sm:block"></div>
        <Footnote class="text-[7px] sm:text-[8px] tracking-wider">
            WGT:{fontWeight}
        </Footnote>
        <div class="w-px h-2 sm:h-2.5 self-center bg-border-subtle hidden sm:block"></div>
        <Footnote class="text-[7px] sm:text-[8px] tracking-wider">
            LH:{lineHeight?.toFixed(2)}
        </Footnote>
        <div class="w-px h-2 sm:h-2.5 self-center bg-border-subtle hidden sm:block"></div>
        <Footnote class="text-[0.4375rem] sm:text-[0.5rem] tracking-wider">
            LTR:{letterSpacing}
        </Footnote>
    </div>
</div>