feat: toggle button

tobiasprima · Mar 21, 2024 · 4a1146f · 4a1146f
1 parent ea390d5
commit 4a1146f
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 3 deletions.
diff --git a/src/features/todos/TodoList.js b/src/features/todos/TodoList.js
@@ -187,9 +187,14 @@ const TodoList = () => {
             {content}
         </div>
         <hr />
-        <button className="toggle-move" onClick={handleMoveDoneToEnd}>
-                Move done things to end
-            </button>
+        <div className="toggle-switch">
+            <span className="switchlabel">Move done things to end</span>
+            <label className="switch">
+                <input type="checkbox" className="switchbox" onChange={handleMoveDoneToEnd} />
+                <span className="slider round"></span>
+            </label>
+        </div>
+
         <div className="bottom-section">
             <p>Add to list</p>
             {newItemSection}

diff --git a/src/index.css b/src/index.css
@@ -185,4 +185,76 @@ input[type="text"] {
 
 .submit:hover .svg-inline--fa {
   color: black;
+}
+
+.toggle-switch {
+  display: flex;
+  align-items: center;
+  width: 600px;
+  justify-content: right;
+}
+
+.switchlabel {
+  margin-right: 1rem;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: #92aafa;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #92aafa;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #92aafa;
+}
+
+input:checked + .slider:before {
+  background-color: white;
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
 }