77 lines
2.7 KiB
Svelte
77 lines
2.7 KiB
Svelte
|
<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>
|