44 lines
1.9 KiB
TypeScript
44 lines
1.9 KiB
TypeScript
import React, { useState } from "react";
|
|
import { useTheme } from "next-themes";
|
|
import { HiSun, HiMoon } from "react-icons/hi";
|
|
|
|
export const ThemeSwitch = () => {
|
|
const { theme, setTheme } = useTheme();
|
|
const [enabled, setEnabled] = useState(true);
|
|
|
|
const handleCheck = () => {
|
|
setEnabled(!enabled);
|
|
}
|
|
|
|
// Use theme requires its own hook which uses Strings. Using an enabled, disabled for a bool hook and the following block translates that to a string.
|
|
if (enabled) {
|
|
setTheme("dark");
|
|
} else {
|
|
setTheme("light");
|
|
}
|
|
|
|
return (
|
|
<div className="flex justify-start md:justify-end items-center space-x-2 mx-auto relative">
|
|
<label className="swap swap-rotate">
|
|
<input type="checkbox" checked={enabled} onChange={handleCheck}/>
|
|
<HiSun className="swap-off relative inline-flex items-center w-10 h-10 text-black" />
|
|
<HiMoon className="swap-on relative inline-flex items-center w-10 h-10 text-white" />
|
|
</label>
|
|
|
|
{/* <Switch.Group>
|
|
<div className="flex items-center">
|
|
<Switch.Label className="mr-3 dark:text-white text-black">Dark Mode</Switch.Label>
|
|
<Switch
|
|
checked={enabled}
|
|
onChange={setEnabled}
|
|
className={`${enabled ? 'bg-gray-400' : 'bg-gray-200'} relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-1 focus:ring-offset-2 dark:ring-white ring-black dark:focus:bg-gray-400 focus:bg-gray-400`}
|
|
>
|
|
<span
|
|
className={`${enabled ? 'translate-x-6' : 'translate-x-1'} inline-block w-4 h-4 transform bg-black dark:bg-white rounded-full transition-transform`} />
|
|
</Switch>
|
|
</div>
|
|
</Switch.Group> */}
|
|
</div>
|
|
);
|
|
};
|