<script>
import { trees } from './data'
import Select from './Select.svelte'
let id_trees = '1'
let id_branches = '1'
$: branches = trees.find(tree => tree.id == id_trees).branches
</script>
<svelte:head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.13.0/cdn/themes/light.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.13.0/cdn/shoelace.js"></script>
</svelte:head>
<Select label="Trees" bind:value={id_trees}>
{#each trees as { id, name }}
<sl-option value={id}>{name}</sl-option>
{/each}
</Select>
<Select label="Branches" bind:value={id_branches}>
{#each branches as { id, name }}
<sl-option value={id}>{name}</sl-option>
{/each}
</Select>