cinny/src/app/organisms/settings/Settings.jsx
2021-07-31 13:51:19 +05:30

58 lines
1.8 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import './Settings.scss';
import initMatrix from '../../../client/initMatrix';
import settings from '../../../client/state/settings';
import Text from '../../atoms/text/Text';
import IconButton from '../../atoms/button/IconButton';
import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';
import PopupWindow from '../../molecules/popup-window/PopupWindow';
import SettingTile from '../../molecules/setting-tile/SettingTile';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
function Settings({ isOpen, onRequestClose }) {
return (
<PopupWindow
className="settings-window"
isOpen={isOpen}
onRequestClose={onRequestClose}
title="Settings"
contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
>
<div className="settings-content">
<SettingTile
title="Theme"
content={(
<SegmentedControls
selected={settings.getThemeIndex()}
segments={[
{ text: 'Light' },
{ text: 'Silver' },
{ text: 'Dark' },
{ text: 'Butter' },
]}
onSelect={(index) => settings.setTheme(index)}
/>
)}
/>
<div style={{ flex: '1' }} />
<Text className="settings__about" variant="b1">
<a href="https://cinny.in/#about" target="_blank" rel="noreferrer">About</a>
</Text>
<Text className="settings__about">Version: 1.0.0</Text>
<Text className="settings__about">{`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}</Text>
</div>
</PopupWindow>
);
}
Settings.propTypes = {
isOpen: PropTypes.bool.isRequired,
onRequestClose: PropTypes.func.isRequired,
};
export default Settings;