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

@@ -6,9 +6,15 @@
 import {
     FontApplicator,
     type UnifiedFont,
+    selectedFontsStore,
 } from '$entities/Font';
 import { controlManager } from '$features/SetupFont';
-import { ContentEditable } from '$shared/ui';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import {
+    ContentEditable,
+    IconButton,
+} from '$shared/ui';
+import MinusIcon from '@lucide/svelte/icons/minus';
 
 interface Props {
     /**
@@ -33,18 +39,43 @@ let {
     ...restProps
 }: Props = $props();
 
-const weight = $derived(controlManager.weight ?? 400);
+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 rounded-xl
+        w-full h-full rounded-xl
-        bg-white p-6 border border-slate-200
+        bg-white border border-slate-200
         shadow-sm dark:border-slate-800 dark:bg-slate-950
     "
-    style:font-weight={weight}
+    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} />
+            <ContentEditable
+                bind:text={text}
+                {...restProps}
+                fontSize={fontSize}
+                lineHeight={lineHeight}
+                letterSpacing={letterSpacing}
+            />
         </FontApplicator>
     </div>
+</div>