From 32d5006d9b73c457b2aac05bf8c6cb4455b90758 Mon Sep 17 00:00:00 2001
From: Madeorsk <madeorsk@protonmail.com>
Date: Sun, 7 Jul 2024 19:47:29 +0200
Subject: [PATCH] Add toggle switch checkbox.

---
 demo/DemoApp.tsx                      |  2 ++
 src/Components/Forms/ToggleSwitch.tsx | 14 +++++++++++
 src/styles/components/forms/_box.less | 34 ++++++++++++++++++++++++++-
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/Components/Forms/ToggleSwitch.tsx

diff --git a/demo/DemoApp.tsx b/demo/DemoApp.tsx
index e90abc4..101c959 100644
--- a/demo/DemoApp.tsx
+++ b/demo/DemoApp.tsx
@@ -22,6 +22,7 @@ import {MainMenuItemSubmenu, MainMenuLink} from "../src/Components/Menus/MainMen
 import {AppItem, AppLink, AppsMenu} from "../src/Components/Menus/AppsMenu";
 import {Application} from "../src/Application/Application";
 import {Outlet} from "react-router-dom";
+import {ToggleSwitch} from "../src/Components/Forms/ToggleSwitch";
 
 export function DemoApp()
 {
@@ -120,6 +121,7 @@ export function DemoApp()
 				<p>Currently selected datetime: <strong>{datetime ? datetime.toISOString() : "none"}</strong></p>
 
 				<Checkbox>Checkbox demo</Checkbox>
+				<ToggleSwitch>Toggle switch demo</ToggleSwitch>
 				<Radio name={"radio-test"}>Radio box test</Radio>
 				<Radio name={"radio-test"}>Radio box test</Radio>
 
diff --git a/src/Components/Forms/ToggleSwitch.tsx b/src/Components/Forms/ToggleSwitch.tsx
new file mode 100644
index 0000000..25c8420
--- /dev/null
+++ b/src/Components/Forms/ToggleSwitch.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import {Check} from "@phosphor-icons/react";
+import {classes} from "../../Utils";
+
+export function ToggleSwitch({children, className, type, ...inputProps}: React.PropsWithChildren<React.InputHTMLAttributes<HTMLInputElement>>): React.ReactElement
+{
+	return (
+		<label className={classes("toggleswitch", className)}>
+			<input type={"checkbox"} {...inputProps} />
+			<a className={"button"} tabIndex={-1}><span className={"switch"}></span></a>
+			{children}
+		</label>
+	);
+}
diff --git a/src/styles/components/forms/_box.less b/src/styles/components/forms/_box.less
index b3f9aa4..95c4603 100644
--- a/src/styles/components/forms/_box.less
+++ b/src/styles/components/forms/_box.less
@@ -1,4 +1,4 @@
-label.box
+label.box, label.toggleswitch
 {
 	display: block;
 
@@ -50,3 +50,35 @@ label.box
 		background: var(--background-lighter);
 	}
 }
+
+label.toggleswitch
+{
+	> .button
+	{
+		display: inline-flex;
+		align-items: center;
+		width: 2.5em;
+
+		> .switch
+		{
+			transition: margin-left 0.25s ease, box-shadow 0.25s ease;
+
+			display: inline-block;
+
+			margin: auto 0.25em;
+			width: 0.9em;
+			height: 0.8em;
+			border-radius: 0.25em;
+			box-shadow: 0 0 0 0 var(--foreground-shadow);
+			border: solid var(--background-darkest) thin;
+			background: var(--background);
+		}
+	}
+
+	> input:checked + .button > .switch
+	{
+		margin-left: 1.2em;
+		border-color: transparent;
+		box-shadow: 0 0 0.4em 0 var(--foreground-shadow);
+	}
+}