highperfocused/open-saas
1
0
Fork 0
mirror of https://github.com/wasp-lang/open-saas.git synced 2025-04-09 20:39:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update DarkModeSwitcher.tsx

Browse Source
This commit is contained in:
vincanger 2024-09-11 14:51:58 +02:00
parent 3c64c8ece6
commit 7d3fb409cb
1 changed files with 5 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
template/app/src/client/components/DarkModeSwitcher.tsx
View File

@ -25,25 +25,19 @@ const DarkModeSwitcher = () => {
}
)}
>
<ModeIcon isInLightMode={isInLightMode} lightIcon={<SunIcon />} darkIcon={<MoonIcon />} />
<ModeIcon isInLightMode={isInLightMode} />
</span>
</label>
</div>
);
};
};
interface ModeIconProps {
isInLightMode: boolean;
lightIcon: JSX.Element;
darkIcon: JSX.Element;
}
function ModeIcon({ isInLightMode, lightIcon, darkIcon }: ModeIconProps) {
function ModeIcon({ isInLightMode }: { isInLightMode: boolean }) {
const iconStyle = 'absolute inset-0 flex items-center justify-center transition-opacity ease-in-out duration-400';
return (
<>
<span className={cn(iconStyle, isInLightMode ? 'opacity-100' : 'opacity-0')}>{lightIcon}</span>
<span className={cn(iconStyle, !isInLightMode ? 'opacity-100' : 'opacity-0')}>{darkIcon}</span>
<span className={cn(iconStyle, isInLightMode ? 'opacity-100' : 'opacity-0')}><SunIcon /></span>
<span className={cn(iconStyle, !isInLightMode ? 'opacity-100' : 'opacity-0')}><MoonIcon /></span>
</>
);
}