<script>
import World from './World.svelte'
let countries = [
{ selected: false, code: "US", name: "United States" },
{ selected: false, code: "CA", name: "Canada" },
{ selected: false, code: "MX", name: "Mexico" }
]
$: selected = countries.filter(country => country.selected).map(country => country.code)
</script>
<div class="container">
<h1>Countries</h1>
<ul>
{#each countries as country}
<li>
<label>
<input type="checkbox" bind:checked={country.selected}/>{country.name}
</label>
</li>
{/each}
</ul>
</div>
<World {selected}/>
<style>
.container {
position: absolute;
}
ul {
padding: 0;
}
li {