Homepage tailwindcss rework

leaky-ships/components/Lobby/SettingsFrame/Setting.tsx

@@ -0,0 +1,49 @@
+import {
+  faToggleLargeOff,
+  faToggleLargeOn,
+} from "@fortawesome/pro-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import classNames from "classnames"
+
+function Setting({
+  props: { key, state, onClick },
+}: {
+  props: {
+    key: string
+    state: boolean
+    onClick: () => void
+  }
+}) {
+  return (
+    <>
+      <label
+        htmlFor={key}
+        className="col-span-2 my-4 select-none text-8xl text-white drop-shadow-md"
+      >
+        {key}
+      </label>
+      <label
+        htmlFor={key}
+        className={state ? "rounded-full bg-gray-300 px-2 transition-all" : ""}
+      >
+        <FontAwesomeIcon
+          className={classNames(
+            "w-24 drop-shadow-md",
+            state ? "text-blue-500" : "text-gray-700"
+          )}
+          icon={state ? faToggleLargeOn : faToggleLargeOff}
+        />
+      </label>
+      <input
+        className="bg-none"
+        checked={state}
+        type="checkbox"
+        id={key}
+        onChange={onClick}
+        hidden={true}
+      />
+    </>
+  )
+}
+
+export default Setting