46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import {
|
|
faToggleLargeOff,
|
|
faToggleLargeOn,
|
|
} from "@fortawesome/pro-solid-svg-icons"
|
|
import classNames from "classnames"
|
|
import { JSX } from "solid-js"
|
|
import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
|
|
import { gameProps, setGameSetting } from "~/hooks/useGameProps"
|
|
import { GameSettingKeys } from "../../../interfaces/frontend"
|
|
|
|
function Setting(props: { children: JSX.Element; key: GameSettingKeys }) {
|
|
const state = () => gameProps[props.key]
|
|
|
|
return (
|
|
<label class="flex items-center justify-between" for={props.key}>
|
|
<span class="col-span-2 w-96 select-none text-5xl text-white drop-shadow-md">
|
|
{props.children}
|
|
</span>
|
|
<FontAwesomeIcon
|
|
class={classNames(
|
|
"text-md mx-auto rounded-full px-4 drop-shadow-md transition-all",
|
|
state() ? "text-blue-500" : "text-gray-800",
|
|
{
|
|
"bg-gray-300 ": state(),
|
|
},
|
|
)}
|
|
size="3x"
|
|
icon={state() ? faToggleLargeOn : faToggleLargeOff}
|
|
/>
|
|
<input
|
|
class="bg-none"
|
|
checked={state()}
|
|
type="checkbox"
|
|
id={props.key}
|
|
onChange={() =>
|
|
setGameSetting({
|
|
[props.key]: !state(),
|
|
})
|
|
}
|
|
hidden={true}
|
|
/>
|
|
</label>
|
|
)
|
|
}
|
|
|
|
export default Setting
|