passing data from component to main code

src/App.svelte

@@ -4,6 +4,9 @@
   router.mode.hash(); // enables hash navigation method
   //router.mode.memory(); // enables in-memory navigation method
   import Card from "./Card.svelte";
+  import Input from "./Input.svelte";
+  let text = "";
+  const handleChange = value => (text = value); //
 </script>
 
 <main>
@@ -141,7 +144,10 @@
       </Route>
 
       <Route path="/test">
-        <Card title="Test section" />
+        <Card title="Testing card">
+          <Input onChange={handleChange} title="Input text" />
+          <h1>{text}</h1>
+        </Card>
       </Route>
     </div>
   </ul>

src/Input.svelte

@@ -0,0 +1,20 @@
+<script>
+    export let title;
+    export let onChange;
+    const handleBlur = e => {
+      if ('function' === typeof onChange) {
+        onChange(e.target.value);
+      }
+    };
+  </script>
+
+<div class="container">
+  <div class="md:flex md:items-center mb-6">
+    <div class="md:w-1/3">
+      <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">{title}</label>
+    </div>
+    <div class="md:w-2/3">
+      <input on:input={handleBlur} class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" />
+    </div>
+  </div>
+</div>