1 files changed, 70 insertions, 0 deletions
diff --git a/MatrixRoomUtils.Web/Shared/SimpleComponents/ToggleSlider.razor b/MatrixRoomUtils.Web/Shared/SimpleComponents/ToggleSlider.razor
new file mode 100644
index 0000000..49a363d
--- /dev/null
+++ b/MatrixRoomUtils.Web/Shared/SimpleComponents/ToggleSlider.razor
@@ -0,0 +1,70 @@
+<input type="checkbox"/><span>@ChildContent</span>
+
+<div class="container">
+    <label class="switch" for="checkbox">
+        <input type="checkbox" id="checkbox" @bind="Value"/>
+        <div class="slider round"></div>
+    </label>
+</div>
+
+<style>
+    .switch {
+      display: inline-block;
+      height: 16px;
+      position: relative;
+      width: 32px;
+    }
+    
+    .switch input {
+      display:none;
+    }
+    
+    .slider {
+      background-color: #ccc;
+      bottom: 0;
+      cursor: pointer;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transition: .4s;
+    }
+    
+    .slider:before {
+      background-color: #fff;
+      bottom: -5px;
+      content: "";
+      height: 26px;
+      left: -8px;
+      position: absolute;
+      transition: .4s;
+      width: 26px;
+    }
+    
+    input:checked + .slider {
+      background-color: #66bb6a;
+    }
+    
+    input:checked + .slider:before {
+      transform: translateX(24px);
+    }
+    
+    .slider.round {
+      border-radius: 24px;
+    }
+    
+    .slider.round:before {
+      border-radius: 50%;
+    }
+</style>
+
+@code {
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+    
+    [Parameter]
+    public bool Value { get; set; }
+    [Parameter]
+    public EventCallback<bool> ValueChanged { get; set; }
+    
+}
\ No newline at end of file