mirror of
https://github.com/Ravinou/borgwarehouse
synced 2024-05-17 13:06:39 +02:00
68 lines
2.2 KiB
JavaScript
68 lines
2.2 KiB
JavaScript
//Lib
|
|
import 'react-toastify/dist/ReactToastify.css';
|
|
import classes from './UserSettings.module.css';
|
|
import { useState } from 'react';
|
|
|
|
//Components
|
|
import EmailSettings from './EmailSettings/EmailSettings';
|
|
import PasswordSettings from './PasswordSettings/PasswordSettings';
|
|
import UsernameSettings from './UsernameSettings/UsernameSettings';
|
|
import EmailAlertSettings from './EmailAlertSettings/EmailAlertSettings';
|
|
import AppriseAlertSettings from './AppriseAlertSettings/AppriseAlertSettings';
|
|
|
|
export default function UserSettings(props) {
|
|
//States
|
|
const [tab, setTab] = useState('General');
|
|
|
|
return (
|
|
<div className={classes.containerSettings}>
|
|
<div>
|
|
<h1
|
|
style={{
|
|
color: '#494b7a',
|
|
textAlign: 'left',
|
|
marginLeft: '30px',
|
|
}}
|
|
>
|
|
Account{' '}
|
|
</h1>
|
|
</div>
|
|
<div className={classes.tabList}>
|
|
<button
|
|
className={
|
|
tab == 'General'
|
|
? classes.tabListButtonActive
|
|
: classes.tabListButton
|
|
}
|
|
onClick={() => setTab('General')}
|
|
>
|
|
General
|
|
</button>
|
|
<button
|
|
className={
|
|
tab == 'Notifications'
|
|
? classes.tabListButtonActive
|
|
: classes.tabListButton
|
|
}
|
|
onClick={() => setTab('Notifications')}
|
|
>
|
|
Notifications
|
|
</button>
|
|
</div>
|
|
{tab == 'General' && (
|
|
<>
|
|
<PasswordSettings username={props.data.user.name} />
|
|
<EmailSettings email={props.data.user.email} />
|
|
<UsernameSettings username={props.data.user.name} />{' '}
|
|
</>
|
|
)}
|
|
{tab == 'Notifications' && (
|
|
<>
|
|
<EmailAlertSettings />
|
|
<AppriseAlertSettings />
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|