Added: ToggleSwitch

Author: Mqxx

src/components/index.ts

@@ -1 +1,2 @@
 export * as button from './button/index.ts'
+export * as toggleSwitch from './toggle_switch/index.ts'

src/components/toggle_switch/index.css

@@ -0,0 +1,21 @@
+.ui.toggle-switch {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  width: 64px;
+  height: 32px;
+  appearance: none;
+  border: 1px solid;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+
+  &[class$="--active"] {
+    background-color: #f6f8fa;
+    box-shadow: 0px 1px 0px 0px #1f23280a;
+    border-color: #d1d9e0;
+    color: #25292e;
+  }
+}

src/components/toggle_switch/index.ts

@@ -0,0 +1 @@
+export {ToggleSwitch} from './toggle_switch.tsx'

src/components/toggle_switch/toggle_switch.tsx

@@ -0,0 +1,28 @@
+import { type JSXElement, createSignal } from '@solid-js'
+
+import './index.css'
+
+
+export function ToggleSwitch() : JSXElement {
+
+  const [state, setState] = createSignal(false);
+
+  const toggle = () => {
+    setState((v) => !v);
+    console.log('State is now:', state());
+  }
+
+  return (
+    <button
+      type='button'
+      class={`ui toggle-switch`}
+      classList={{
+        'toggle-switch--active': state()
+      }}
+      data-checked={state()}
+      onClick={toggle}
+    >
+      {state() ? 'ON' : 'OFF'}
+    </button>
+  )
+}

src/render/index.tsx

@@ -1,12 +1,13 @@
 import { render } from '@solid-js/web';
 import { HashRouter, Route } from '@solid-js/router'
-import { button } from '../components/index.ts';
+import { button, toggleSwitch } from '../components/index.ts';
 import './index.css'
 
 
 render(
   () => <HashRouter>
     <Route path='/button' component={() => <button.Button>Hello</button.Button>}/>
+    <Route path='/toggle-switch' component={() => <toggleSwitch.ToggleSwitch />}/>
   </HashRouter>,
   globalThis.document.body
 );