Replace Toggle with a custom component

app/soapbox/components/ui/toggle/toggle.tsx

@@ -1,13 +1,37 @@
-import React from 'react';
-import ReactToggle, { ToggleProps } from 'react-toggle';
+import clsx from 'clsx';
+import React, { useRef } from 'react';
+
+interface IToggle extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'checked' | 'onChange' | 'required'> {
+
+}
 
 /** A glorified checkbox. Wrapper around react-toggle. */
-const Toggle: React.FC<ToggleProps> = ({ icons = false, ...rest }) => {
+const Toggle: React.FC<IToggle> = ({ id, checked, onChange, required }) => {
+  const input = useRef<HTMLInputElement>(null);
+
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault();
+    input.current?.focus();
+    input.current?.click();
+  };
+
   return (
-    <ReactToggle
-      icons={icons}
-      {...rest}
-    />
+    <button
+      className='w-9 rounded-full bg-gray-500 p-0.5'
+      onClick={handleClick}
+    >
+      <div className={clsx('h-4.5 w-4.5 rounded-full bg-white transition-transform', { 'translate-x-3': checked })} />
+
+      <input
+        id={id}
+        ref={input}
+        type='checkbox'
+        className='sr-only'
+        checked={checked}
+        onChange={onChange}
+        required={required}
+      />
+    </button>
   );
 };