frontend-svelte/src/entities/Font/ui/FontListItem/FontListItem.svelte

<!--
    Component: FontListItem
    Displays a font item with a checkbox and its characteristics in badges.
-->
<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,
    selectedFontsStore,
} from '../../model';
import FontApplicator from '../FontApplicator/FontApplicator.svelte';

interface Props {
    font: UnifiedFont;
}

const { font }: Props = $props();

const handleChange = (checked: boolean) => {
    if (checked) {
        selectedFontsStore.addOne(font);
    } else {
        selectedFontsStore.removeOne(font.id);
    }
};

const selected = $derived(selectedFontsStore.has(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"
                        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>