86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
|
import AccountCircleIcon from '@mui/icons-material/AccountCircle'
|
||
|
|
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
|
||
|
|
import RouterIcon from '@mui/icons-material/Router'
|
||
|
|
import { useTheme } from '@mui/material'
|
||
|
|
import List from '@mui/material/List'
|
||
|
|
import ListItemButton from '@mui/material/ListItemButton'
|
||
|
|
import ListItemIcon from '@mui/material/ListItemIcon'
|
||
|
|
import ListItemText from '@mui/material/ListItemText'
|
||
|
|
import ListSubheader from '@mui/material/ListSubheader'
|
||
|
|
import { useSelector } from 'react-redux'
|
||
|
|
import { useNavigate } from 'react-router-dom'
|
||
|
|
import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
|
||
|
|
import { State } from '../../store/rootReducer'
|
||
|
|
|
||
|
|
export const SettingsPage = () => {
|
||
|
|
const theme = useTheme()
|
||
|
|
|
||
|
|
const navigate = useNavigate()
|
||
|
|
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
|
||
|
|
|
||
|
|
const listItem = (label: string, disabled = false) => {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<ListItemText
|
||
|
|
primary={label}
|
||
|
|
sx={{
|
||
|
|
color: theme.palette.text.primary
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{!disabled && (
|
||
|
|
<ArrowForwardIosIcon
|
||
|
|
style={{
|
||
|
|
color: theme.palette.action.active,
|
||
|
|
marginRight: -10
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<List
|
||
|
|
sx={{
|
||
|
|
width: '100%',
|
||
|
|
bgcolor: 'background.paper',
|
||
|
|
marginTop: 2
|
||
|
|
}}
|
||
|
|
subheader={
|
||
|
|
<ListSubheader
|
||
|
|
sx={{
|
||
|
|
fontSize: '1.5rem',
|
||
|
|
borderBottom: '0.5px solid',
|
||
|
|
paddingBottom: 2,
|
||
|
|
paddingTop: 2
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Settings
|
||
|
|
</ListSubheader>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<ListItemButton
|
||
|
|
onClick={() => {
|
||
|
|
navigate(getProfileSettingsRoute(usersPubkey!))
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ListItemIcon>
|
||
|
|
<AccountCircleIcon />
|
||
|
|
</ListItemIcon>
|
||
|
|
{listItem('Profile')}
|
||
|
|
</ListItemButton>
|
||
|
|
<ListItemButton
|
||
|
|
onClick={() => {
|
||
|
|
navigate(appPrivateRoutes.relays)
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ListItemIcon>
|
||
|
|
<RouterIcon />
|
||
|
|
</ListItemIcon>
|
||
|
|
{listItem('Relays')}
|
||
|
|
</ListItemButton>
|
||
|
|
</List>
|
||
|
|
)
|
||
|
|
}
|