From 6f9aee85a9c3285280bfa2b639de550a683ec648 Mon Sep 17 00:00:00 2001
From: szbk <wisecolt@gmail.com>
Date: Sun, 7 Apr 2024 23:38:03 +0300
Subject: [PATCH] add ui elements

---
 src/components/Header.svelte | 10 +++++++++-
 src/libs/ui/Stepper.svelte   | 29 ++++++++++++++++++++++++-----
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 53c7a31..384263b 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,14 +1,22 @@
+<script>
+  import logo from "../assets/logo.png";
+</script>
+
 <div class="head">SMART HOME</div>
 
 <style>
   .head {
-    background-color: #fff;
     width: 100vw;
     height: 70px;
+    background-color: #fff;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding-left: 20px;
     box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
+    font-size: 25px;
+  }
+  .logo{
+    width: 50px;
   }
 </style>
diff --git a/src/libs/ui/Stepper.svelte b/src/libs/ui/Stepper.svelte
index 9e720ec..83712a2 100644
--- a/src/libs/ui/Stepper.svelte
+++ b/src/libs/ui/Stepper.svelte
@@ -1,4 +1,5 @@
 <script>
+  let value;
   let counter = 0;
 
   const increaseCounter = () => {
@@ -7,6 +8,11 @@
   const decreaseCounter = () => {
     counter = counter < 1 ? 0 : counter - 1;
   };
+
+  const handleChange = (e) => {
+    value = e.target.value;
+    console.log(value);
+  };
 </script>
 
 <div class="stepper">
@@ -19,7 +25,9 @@
   >
     -
   </div>
-  <div class="number">{counter}</div>
+  <div class="number">
+    <input class="number-text" type="text" bind:value={counter} on:input={handleChange} />
+  </div>
   <div
     class="button increase"
     on:click={increaseCounter}
@@ -38,7 +46,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 5px;
-    border: solid 1px #7B819E;
+    border: solid 1px #7b819e;
     box-sizing: border-box;
     padding: 0px;
   }
@@ -48,10 +56,21 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-left: solid 1px #7B819E;
-    border-right: solid 1px #7B819E;
+    border-left: solid 1px #7b819e;
+    border-right: solid 1px #7b819e;
     color: #4a4d5d;
   }
+  .number-text {
+    box-sizing: border-box;
+    width: 40px;
+    height: 100%;
+    border: none;
+    font-size: 20px;
+    text-align: center;
+  }
+  .number-text:focus {
+    outline: none;
+  }
   .button {
     width: 40px;
     height: 100%;
@@ -59,7 +78,7 @@
     align-items: center;
     justify-content: center;
     font-size: 28px;
-    color: #7B819E;
+    color: #7b819e;
     cursor: pointer;
     box-sizing: border-box;
     padding: 0px;