gdq-archive/frontend/components/DarkToggler.tsx

58 lines
1.8 KiB
TypeScript

/**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from 'react';
// import useSWR from 'swr';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
Button,
// Spinner
} from 'react-bootstrap';
import { FormattedMessage } from './localization';
export default function DarkToggler({
isDarkEnabled = false,
onChangeDarkMode = null,
disabled = false,
showLoading = false,
}: {
isDarkEnabled?: boolean,
onChangeDarkMode?: (value: boolean) => void,
disabled?: boolean,
showLoading?: boolean,
} = {}) {
return (
<Button
onClick={() => {
onChangeDarkMode(!isDarkEnabled);
}}
disabled={disabled || showLoading}
variant="outline-secondary"
active={!isDarkEnabled}
>
<FontAwesomeIcon icon={[isDarkEnabled ? 'far' : 'fas', 'lightbulb']} />
<span className="sr-only">
<FormattedMessage
id="DarkToggler.screenReaderText"
defaultMessage="Toggle dark mode"
description="Screen reader description of the dark mode toggle button"
/>
</span>
</Button>
);
}