<script>
import Box from './Box.svelte';
import C1 from './C1.svelte';
import C2 from './C2.svelte';
    let display = "one";
    let value = "one";

    function one() {
		display = "one";
		value = "one";
	}

	function two() {
		display = "two";
		value = "two";
	}

</script>

<button on:click={one}>one</button>
<button on:click={two}>two</button>

<p>value : {value}</p>
    <p>display : {display}</p>
<Box>
	{#if (display=="one")}
    <C1/>

	{:else if (display == "two")}
    <C2/>
	{:else}
	<p>
		default value
	</p>
	{/if}
    <hr/>
    <p>box footer - {value}</p>

</Box>