From fc671488158c921c13264ef325dac999eec33ec3 Mon Sep 17 00:00:00 2001
From: Martin Berg Alstad <600878@stud.hvl.no>
Date: Tue, 10 Jan 2023 22:49:19 +0100
Subject: [PATCH] Added switch

---
 src/components/button.tsx | 41 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/button.tsx

diff --git a/src/components/button.tsx b/src/components/button.tsx
new file mode 100644
index 0000000..ecb8f83
--- /dev/null
+++ b/src/components/button.tsx
@@ -0,0 +1,41 @@
+/* @refresh reload */
+import { type Component, createSignal } from "solid-js";
+import type { TitleProps } from "../types/interfaces";
+
+interface SwitchProps extends TitleProps {
+    defaultValue?: boolean,
+    onChange?: (value: boolean) => void,
+}
+
+export const MySwitch: Component<SwitchProps> = (
+    {
+        defaultValue = false,
+        title,
+        onChange,
+        className,
+        name,
+        id
+    }) => {
+
+    const [checked, setChecked] = createSignal(defaultValue);
+
+    function handleChange() {
+        const newChecked = !checked();
+        setChecked(newChecked);
+        if (onChange) {
+            onChange(newChecked);
+        }
+    }
+
+    return (
+        <button id={ id }
+                onClick={ handleChange }
+                title={ title }
+                class={ `${ checked() ? "bg-cyan-900" : "bg-gray-500" } 
+                                       relative inline-flex h-6 w-11 items-center rounded-full my-2 ${ className }` }>
+            <span class={ "sr-only" }>{ name }</span>
+            <span class={ `${ checked() ? 'translate-x-6' : 'translate-x-1' }
+             inline-block h-4 w-4 transform rounded-full bg-white transition-all` } />
+        </button>
+    );
+};