119 lines
3.4 KiB
Svelte
119 lines
3.4 KiB
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 {
|
|
ContentEditable,
|
|
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.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-2xl
|
|
flex flex-col
|
|
backdrop-blur-md bg-white/80
|
|
border border-gray-300/50
|
|
shadow-[0_1px_3px_rgba(0,0,0,0.04)]
|
|
relative overflow-hidden
|
|
"
|
|
style:font-weight={fontWeight}
|
|
>
|
|
<div class="px-6 py-3 border-b border-gray-200/60 flex items-center justify-between">
|
|
<div class="flex items-center gap-2.5">
|
|
<span class="font-mono text-[9px] uppercase tracking-[0.25em] text-gray-500 font-medium">
|
|
typeface_{String(index).padStart(3, '0')}
|
|
</span>
|
|
<div class="w-px h-2.5 bg-gray-300/60"></div>
|
|
<span class="font-mono text-[10px] tracking-[0.15em] font-bold uppercase text-gray-900">
|
|
{font.name}
|
|
</span>
|
|
</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-8 relative z-10">
|
|
<!-- TODO: Fix this ! -->
|
|
<FontApplicator id={font.id} name={font.name} url={font.styles.regular!}>
|
|
<ContentEditable
|
|
bind:text={text}
|
|
{...restProps}
|
|
fontSize={fontSize}
|
|
lineHeight={lineHeight}
|
|
letterSpacing={letterSpacing}
|
|
/>
|
|
</FontApplicator>
|
|
</div>
|
|
|
|
<div class="px-6 py-2 border-t border-gray-200/40 w-full flex gap-4 bg-gray-50/30 mt-auto">
|
|
<span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider ml-auto">
|
|
SZ:{fontSize}PX
|
|
</span>
|
|
<div class="w-px h-2.5 self-center bg-gray-300/40"></div>
|
|
<span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider">
|
|
WGT:{fontWeight}
|
|
</span>
|
|
<div class="w-px h-2.5 self-center bg-gray-300/40"></div>
|
|
<span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider">
|
|
LH:{lineHeight?.toFixed(2)}
|
|
</span>
|
|
<div class="w-px h-2.5 self-center bg-gray-300/40"></div>
|
|
<span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider">
|
|
LTR:{letterSpacing}
|
|
</span>
|
|
</div>
|
|
</div>
|