let-me-focus-browser/components/MainToggle.tsx

28 lines
792 B
TypeScript

import { createSignal, onMount } from "solid-js";
import { featureEnableBlock } from "@/utils/storage";
import "./MainToggle.css";
export const MainToggle = (props) => {
const [isEnabled, setIsEnabled] = createSignal(false);
onMount(async () => {
const getFeatureEnable = await featureEnableBlock.getValue();
setIsEnabled(getFeatureEnable);
});
const toggleOnOff = () => {
setIsEnabled(!isEnabled());
featureEnableBlock.setValue(isEnabled());
};
return (
<div>
<button class="button-toggle" onClick={() => toggleOnOff()}>
<img
src="/icon/128.png"
class={isEnabled() ? "logo logo-on" : "logo"}
alt="let me focus logo"
/>
</button>
<br />
{isEnabled() ? "[on]" : "[off]"}
</div>
);
};