|
@@ -6,6 +6,23 @@
|
|
|
function handleClick() {
|
|
|
count += 1;
|
|
|
}
|
|
|
+
|
|
|
+ import Nested from './Nested.svelte';
|
|
|
+ import Info from './Info.svelte';
|
|
|
+
|
|
|
+ const pkg = {
|
|
|
+ name: 'svelte',
|
|
|
+ version: 3,
|
|
|
+ speed: 'blazing',
|
|
|
+ website: 'https://svelte.dev'
|
|
|
+ };
|
|
|
+
|
|
|
+ let user = { loggedIn: false };
|
|
|
+
|
|
|
+ function toggle() {
|
|
|
+ user.loggedIn = !user.loggedIn;
|
|
|
+ }
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@@ -19,3 +36,26 @@
|
|
|
<button on:click={handleClick}>
|
|
|
Clicked {count} {count === 1 ? 'time' : 'times'}
|
|
|
</button>
|
|
|
+
|
|
|
+<Nested answer={42}/>
|
|
|
+<Nested/>
|
|
|
+
|
|
|
+
|
|
|
+<!--Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/-->
|
|
|
+<!-- spreading props -->
|
|
|
+<Info {...pkg}/>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+{#if user.loggedIn}
|
|
|
+ <button on:click={toggle}>
|
|
|
+ Log out
|
|
|
+ </button>
|
|
|
+{:else}
|
|
|
+ <button on:click={toggle}>
|
|
|
+ Log in
|
|
|
+ </button>
|
|
|
+{/if}
|
|
|
+
|
|
|
+
|
|
|
+
|