2.0 Overhaul start

2022-09-22 16:35:40 +10:00
parent 4e45990ef5
commit a73eab1ea6
87 changed files with 2880 additions and 3573 deletions
@@ -0,0 +1,48 @@
+import type React from "react";
+
+import { Switch } from "@headlessui/react";
+
+export interface ToggleProps {
+  label: string;
+  description: string;
+  checked: boolean;
+  onChange?: (checked: boolean) => void;
+}
+
+export const Toggle = ({
+  label,
+  description,
+  checked,
+  onChange,
+}: ToggleProps): JSX.Element => {
+  return (
+    <Switch.Group as="div" className="flex items-center justify-between">
+      <span className="flex flex-grow flex-col">
+        <Switch.Label
+          as="span"
+          className="text-sm font-medium text-gray-900"
+          passive
+        >
+          {label}
+        </Switch.Label>
+        <Switch.Description as="span" className="text-sm text-gray-500">
+          {description}
+        </Switch.Description>
+      </span>
+      <Switch
+        checked={checked}
+        onChange={onChange}
+        className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+          checked ? "bg-indigo-600" : "bg-gray-200"
+        }`}
+      >
+        <span
+          aria-hidden="true"
+          className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+            checked ? "translate-x-5" : "translate-x-0"
+          }`}
+        />
+      </Switch>
+    </Switch.Group>
+  );
+};