export count as props

svelte/src/App.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
 	export let name: string;
-	import Counter from './/Counter.svelte';
+	import Counter from './Counter.svelte';
+  const p = {
+		count: 20000,
+		isHello: true,
+		cats: [
+			{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
+			{ id: 'z_AbfPXTKms', name: 'Maru' },
+			{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
+		]
+	}
 </script>
 
 <main>
 	<h1>Hello {name}!</h1>
 	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
 </main>
-<Counter />
+<Counter {...p} />
 
 <style>
 	main {

svelte/src/Counter.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-	let count = 0;
-
-	const onDecreaseClick = () => (count -= 1)
+	export let count = 0;
+  export let isHello = true
+  export let cats = [{
+		id: 'default id',
+		name: 'default name',
+	}]
+	export const onDecreaseClick = () => (count -= 1)
   const onIncreaseClick = () => (count += 1)
 </script>
 
@@ -17,4 +21,11 @@
 	<button on:click={onIncreaseClick} aria-label="Increase the counter by one">
 		+1
 	</button>
+  {#if isHello && count%2 === 0}
+    <p>Hello svelte logic</p>
+  {/if}
+
+	{#each cats as {id, name}, index}
+		<p><span style="font-weight: bold;">{index + 1}.</span> ID:{id} Name:{name}</p>
+	{/each}
 </div>