fergalmoran/supanextail
1
0
Fork 0
mirror of https://github.com/fergalmoran/supanextail.git synced 2025-12-22 09:17:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

First pass prettier/eslint and headwind

Browse Source
This commit is contained in:
Michael
2021-12-16 23:45:43 +01:00
parent ab9e3732d6
commit be7580c04d
47 changed files with 2149 additions and 1939 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/UI/ThemeToggle.tsx
View File

@@ -7,28 +7,30 @@ import { HiOutlineMoon, HiOutlineSun } from 'react-icons/hi';
import { useEffect, useState } from 'react';
const theme = {
primary: 'supaTheme',
secondary: 'dark',
primary: 'supaTheme',
secondary: 'dark',
};
const ThemeToggle = (): JSX.Element => {
const [activeTheme, setActiveTheme] = useState(document.body.dataset.theme || '');
const inactiveTheme = activeTheme === 'supaTheme' ? 'dark' : 'supaTheme';
const [activeTheme, setActiveTheme] = useState(
document.body.dataset.theme || ''
);
const inactiveTheme = activeTheme === 'supaTheme' ? 'dark' : 'supaTheme';
useEffect(() => {
document.body.dataset.theme = activeTheme;
window.localStorage.setItem('theme', activeTheme);
}, [activeTheme]);
useEffect(() => {
document.body.dataset.theme = activeTheme;
window.localStorage.setItem('theme', activeTheme);
}, [activeTheme]);
return (
<button className="flex ml-3" onClick={() => setActiveTheme(inactiveTheme)}>
{activeTheme === theme.secondary ? (
<HiOutlineSun className="m-auto text-xl hover:text-accent" />
) : (
<HiOutlineMoon className="m-auto text-xl hover:text-accent" />
)}
</button>
);
return (
<button className="flex ml-3" onClick={() => setActiveTheme(inactiveTheme)}>
{activeTheme === theme.secondary ? (
<HiOutlineSun className="m-auto text-xl hover:text-accent" />
) : (
<HiOutlineMoon className="m-auto text-xl hover:text-accent" />
)}
</button>
);
};
export default ThemeToggle;