web/util: add pure css toggle element

web/src/ui/util/Toggle.css

@@ -0,0 +1,36 @@
+input.toggle {
+	--transition-duration: .3s;
+	--disabled-color: var(--secondary-text-color);
+	--enabled-color: var(--primary-color-dark);
+
+	cursor: var(--clickable-cursor);
+	appearance: none;
+	display: block;
+	background-color: var(--background-color);
+	border: 1px solid var(--disabled-color);
+	border-radius: 1.5em;
+	width: 3.5em;
+	height: 2em;
+	padding: calc(.25em - 1px);
+	transition: background-color var(--transition-duration), border-color var(--transition-duration);
+
+	&::after {
+		content: "";
+		display: block;
+		height: 1.5em;
+		width: 1.5em;
+		border-radius: 50%;
+		background-color: var(--disabled-color);
+		transition: margin-left var(--transition-duration), background-color var(--transition-duration);
+	}
+
+	&:checked {
+		border-color: var(--enabled-color);
+		background-color: var(--enabled-color);
+
+		&::after {
+			margin-left: 1.5em;
+			background-color: var(--background-color);
+		}
+	}
+}

web/src/ui/util/Toggle.tsx

@@ -0,0 +1,37 @@
+// gomuks - A Matrix client written in Go.
+// Copyright (C) 2024 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import { InputHTMLAttributes } from "react"
+import "./Toggle.css"
+
+export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+	disabledColor?: string
+	enabledColor?: string
+}
+
+const Toggle = (props: ToggleProps) => {
+	const extraStyle = {
+		"--disabled-color": props.disabledColor,
+		"--enabled-color": props.enabledColor,
+	}
+	return <input
+		{...props}
+		type="checkbox"
+		className={props.className ? `toggle ${props.className}` : "toggle"}
+		style={{ ...(props.style ?? {}), ...extraStyle }}
+	/>
+}
+
+export default Toggle