From 591887fc8075a7892d73fda95ed034af2b8fdf4a Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <rise33@yandex.ru>
Date: Sat, 14 Aug 2021 16:44:55 +0000
Subject: [PATCH 1/5] 1

---
 src/App.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.svelte b/src/App.svelte
index edec3ec..d668c6e 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,5 +1,5 @@
 <script>
-  //роутер =========================================
+  //роутер ==========================================
   import { Route, router, active } from "tinro";
   router.mode.hash(); // enables hash navigation method
   //router.mode.memory(); // enables in-memory navigation method

From 57f624b95dd2f189b36abf44741a6bb5240eacc5 Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <rise33@yandex.ru>
Date: Sat, 14 Aug 2021 17:06:51 +0000
Subject: [PATCH 2/5] test section added

---
 package.json   | 4 ++--
 src/App.svelte | 8 ++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index a24f1cd..accaa3d 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
     "autoprefixer": "^10.3.1",
     "postcss": "^8.3.6",
     "postcss-load-config": "^3.1.0",
+    "prettier": "^2.3.2",
+    "prettier-plugin-svelte": "^2.3.1",
     "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
@@ -21,8 +23,6 @@
     "svelte": "^3.0.0",
     "svelte-preprocess": "^4.7.4",
     "tailwindcss": "^2.2.7",
-    "prettier": "^2.3.2",
-    "prettier-plugin-svelte": "^2.3.1",
     "tinro": "^0.5.12"
   },
   "dependencies": {
diff --git a/src/App.svelte b/src/App.svelte
index d668c6e..1585e89 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -36,6 +36,9 @@
       <li>
         <a class="menu__item" href="/about">{"О проекте"}</a>
       </li>
+      <li>
+        <a class="menu__item" href="/test">{"Test"}</a>
+      </li>
     </ul>
   </ul>
 
@@ -136,6 +139,11 @@
           </div>
         </Card>
       </Route>
+
+      <Route path="/test">
+        <Card title="Test section" />
+      </Route>
+
     </div>
   </ul>
 </main>

From 64b6556a568e4ffd68f2c063c4501e213987658c Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <rise33@yandex.ru>
Date: Sat, 14 Aug 2021 17:07:49 +0000
Subject: [PATCH 3/5] trettier formatting

---
 src/App.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/App.svelte b/src/App.svelte
index 1585e89..cbb054c 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -143,7 +143,6 @@
       <Route path="/test">
         <Card title="Test section" />
       </Route>
-
     </div>
   </ul>
 </main>

From b167e40f8d156f40234e1467a65df6dece89fcf8 Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <rise33@yandex.ru>
Date: Sat, 14 Aug 2021 17:37:43 +0000
Subject: [PATCH 4/5] passing data from component to main code

---
 src/App.svelte   |  8 +++++++-
 src/Input.svelte | 20 ++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 src/Input.svelte

diff --git a/src/App.svelte b/src/App.svelte
index cbb054c..3386ed5 100644
--- a/src/App.svelte
+++ b/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>
diff --git a/src/Input.svelte b/src/Input.svelte
new file mode 100644
index 0000000..a220bee
--- /dev/null
+++ b/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>
\ No newline at end of file

From 3124f98d1c72f1e7cfcb7563b91262a27e1ec924 Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <rise33@yandex.ru>
Date: Sat, 14 Aug 2021 17:43:26 +0000
Subject: [PATCH 5/5] add 2 example of input component

---
 src/App.svelte | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 3386ed5..3a6fb66 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -5,8 +5,10 @@
   //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); //
+  let text1 = "";
+  let text2 = "";
+  const handleChange1 = value => (text1 = value); 
+  const handleChange2 = value => (text2 = value);
 </script>
 
 <main>
@@ -144,9 +146,13 @@
       </Route>
 
       <Route path="/test">
-        <Card title="Testing card">
-          <Input onChange={handleChange} title="Input text" />
-          <h1>{text}</h1>
+        <Card title="Testing card1">
+          <Input onChange={handleChange1} title="Input text1" />
+          <h1>{text1}</h1>
+        </Card>
+        <Card title="Testing card2">
+          <Input onChange={handleChange2} title="Input text2" />
+          <h1>{text2}</h1>
         </Card>
       </Route>
     </div>