Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | 3x 7x 7x 1x 7x 1x 7x 14x | import * as React from 'react';
import SwipeableViews from 'react-swipeable-views';
import { Box, Paper, Tab, Tabs } from '@material-ui/core';
import { AccountTab } from 'components/account-tab';
import { PerformanceTab } from 'components/performance-tab';
import {
AccountCircle as AccountCircleIcon,
Equalizer as EqualizerIcon,
Palette as PaletteIcon,
} from '@material-ui/icons';
const tabs = [
{
key: 'Account',
icon: <AccountCircleIcon />,
},
{
key: 'Performance',
icon: <EqualizerIcon />,
},
];
export default function UserSettingsScreen() {
const [selectedTab, setSelectedTab] = React.useState(0);
const handleTabChange = (event, newValue) => {
setSelectedTab(newValue);
};
const handleIndexChange = (index) => {
setSelectedTab(index);
};
return (
<Box
sx={{
height: '100%',
display: 'flex',
alignItems: 'center',
maxWidth: 600,
}}
>
<Box
component={Paper}
sx={{ width: '100%', height: { xs: '100%', sm: 'auto' } }}
>
<Tabs
value={selectedTab}
onChange={handleTabChange}
variant="fullWidth"
indicatorColor="primary"
textColor="primary"
>
{tabs.map(({ key, icon }, index) => {
return <Tab key={key} icon={icon} label={key} value={index} />;
})}
</Tabs>
<Box sx={{ m: { xs: 0, sm: 2 } }}>
<SwipeableViews
containerStyle={{
transition: 'transform 0.35s cubic-bezier(0.15, 0.3, 0.25, 1) 0s',
}}
index={selectedTab}
onChangeIndex={handleIndexChange}
>
<AccountTab />
<PerformanceTab />
</SwipeableViews>
</Box>
</Box>
</Box>
);
}
export { UserSettingsScreen };
|