From 86e7b2c1ec6d105d22b14433a6d812575fab12ac Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 18 Jan 2026 12:59:12 +0300
Subject: [PATCH] feat(FontListItem): create FontListItem component that
 visualize selection of a certain font

---
 .../Font/ui/FontListItem/FontListItem.svelte  | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 src/entities/Font/ui/FontListItem/FontListItem.svelte

diff --git a/src/entities/Font/ui/FontListItem/FontListItem.svelte b/src/entities/Font/ui/FontListItem/FontListItem.svelte
new file mode 100644
index 0000000..9ded8aa
--- /dev/null
+++ b/src/entities/Font/ui/FontListItem/FontListItem.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+import { Badge } from '$shared/shadcn/ui/badge';
+import { Checkbox } from '$shared/shadcn/ui/checkbox';
+import { Label } from '$shared/shadcn/ui/label';
+import type { UnifiedFont } from '../../model';
+import FontApplicator from '../FontApplicator/FontApplicator.svelte';
+
+interface Props {
+    font: UnifiedFont;
+    selected?: boolean;
+    onSelect?: (slug: string) => void;
+    onDeselect?: (slug: string) => void;
+}
+
+let { font, selected, onSelect, onDeselect }: Props = $props();
+
+const handleChange = (checked: boolean) => {
+    if (onSelect && checked) {
+        onSelect(font.id);
+    } else if (onDeselect && !checked) {
+        onDeselect(font.id);
+    }
+};
+</script>
+
+<div class="pb-1">
+    <Label
+        for={font.id}
+        class="
+            w-full hover:bg-accent/50 flex items-start gap-3 rounded-lg border border-transparent p-3
+            active:scale-[0.98] active:transition-transform active:duration-75
+            has-aria-checked:border-blue-600
+            has-aria-checked:bg-blue-50
+            dark:has-aria-checked:border-blue-900
+            dark:has-aria-checked:bg-blue-950
+        "
+    >
+        <div class="w-full">
+            <div class="flex flex-row gap-1 w-full items-center justify-between">
+                <div class="flex flex-col gap-1 transition-all duration-150 ease-out">
+                    <div class="flex flex-row gap-1">
+                        <Badge variant="outline" class="text-[0.5rem]">
+                            {font.provider}
+                        </Badge>
+                        <Badge variant="outline" class="text-[0.5rem]">
+                            {font.category}
+                        </Badge>
+                    </div>
+                    <FontApplicator
+                        id={font.id}
+                        className="text-2xl"
+                        slug={font.id}
+                        name={font.name}
+                    >
+                        {font.name}
+                    </FontApplicator>
+                </div>
+
+                <Checkbox
+                    id={font.id}
+                    checked={selected}
+                    onCheckedChange={handleChange}
+                    class="
+                        transition-all duration-150 ease-out
+                        data-[state=checked]:scale-100
+                        data-[state=checked]:border-blue-600
+                        data-[state=checked]:bg-blue-600
+                        data-[state=checked]:text-white
+                        dark:data-[state=checked]:border-blue-700
+                        dark:data-[state=checked]:bg-blue-700
+                    "
+                />
+            </div>
+        </div>
+    </Label>
+</div>