shlink-web-client/src/settings/UserInterfaceSettings.tsx

32 lines
1.1 KiB
TypeScript
Raw Normal View History

2023-02-18 13:11:01 +03:00
import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
2023-02-18 13:11:01 +03:00
import type { FC } from 'react';
import { SimpleCard } from '../utils/SimpleCard';
2023-02-18 12:40:37 +03:00
import type { Theme } from '../utils/theme';
import { changeThemeInMarkup } from '../utils/theme';
2023-02-18 13:11:01 +03:00
import { ToggleSwitch } from '../utils/ToggleSwitch';
2023-02-18 12:40:37 +03:00
import type { Settings, UiSettings } from './reducers/settings';
import './UserInterfaceSettings.scss';
interface UserInterfaceProps {
settings: Settings;
setUiSettings: (settings: UiSettings) => void;
}
export const UserInterfaceSettings: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings }) => (
<SimpleCard title="User interface" className="h-100">
2022-02-14 22:28:28 +03:00
<FontAwesomeIcon icon={ui?.theme === 'dark' ? faMoon : faSun} className="user-interface__theme-icon" />
<ToggleSwitch
checked={ui?.theme === 'dark'}
onChange={(useDarkTheme) => {
const theme: Theme = useDarkTheme ? 'dark' : 'light';
2022-02-14 22:28:28 +03:00
setUiSettings({ ...ui, theme });
changeThemeInMarkup(theme);
}}
>
Use dark theme.
</ToggleSwitch>
</SimpleCard>
);