39 lines
1.2 KiB
Svelte
39 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import type { SubspeciesField } from '$lib/types';
|
|
import { species } from '$lib/data';
|
|
import { slugify } from '$lib/utils/slugify';
|
|
|
|
let { field, value = '', onChange, data }: {
|
|
field: SubspeciesField;
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
data: Record<string, unknown>;
|
|
} = $props();
|
|
|
|
let currentSpecies = $derived(species.find((s) => s.id === data[slugify('Species')]));
|
|
let subs = $derived(currentSpecies?.subspecies ?? []);
|
|
let label = $derived(currentSpecies?.subspeciesLabel ?? field.label);
|
|
let selected = $derived(subs.find((s) => s.id === value));
|
|
</script>
|
|
|
|
{#if subs.length > 0}
|
|
<div class="block">
|
|
<label class="block">
|
|
<span class="text-sm font-medium">{label}</span>
|
|
<select
|
|
{value}
|
|
onchange={(e) => onChange((e.target as HTMLSelectElement).value)}
|
|
class="mt-1 block w-full rounded px-3 py-2 text-sm"
|
|
style="background: var(--bg-input); border: 1px solid var(--border); color: var(--text);"
|
|
>
|
|
<option value="">—</option>
|
|
{#each subs as sub}
|
|
<option value={sub.id}>{sub.name}</option>
|
|
{/each}
|
|
</select>
|
|
</label>
|
|
{#if selected?.description}
|
|
<p class="mt-1 text-sm italic" style="color: var(--text-muted);">{selected.description}</p>
|
|
{/if}
|
|
</div>
|
|
{/if}
|