97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import AccountCircleIcon from '@mui/icons-material/AccountCircle'
|
|
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
|
|
import CachedIcon from '@mui/icons-material/Cached'
|
|
import RouterIcon from '@mui/icons-material/Router'
|
|
import { ListItem, useTheme } from '@mui/material'
|
|
import List from '@mui/material/List'
|
|
import ListItemIcon from '@mui/material/ListItemIcon'
|
|
import ListItemText from '@mui/material/ListItemText'
|
|
import ListSubheader from '@mui/material/ListSubheader'
|
|
import { useAppSelector } from '../../hooks/store'
|
|
import { Link } from 'react-router-dom'
|
|
import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
|
|
import { Container } from '../../components/Container'
|
|
import { Footer } from '../../components/Footer/Footer'
|
|
import ExtensionIcon from '@mui/icons-material/Extension'
|
|
import { LoginMethod } from '../../store/auth/types'
|
|
|
|
export const SettingsPage = () => {
|
|
const theme = useTheme()
|
|
const { usersPubkey, loginMethod } = useAppSelector((state) => state.auth)
|
|
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 (
|
|
<>
|
|
<Container>
|
|
<List
|
|
sx={{
|
|
width: '100%',
|
|
bgcolor: 'background.paper'
|
|
}}
|
|
subheader={
|
|
<ListSubheader
|
|
sx={{
|
|
fontSize: '1.5rem',
|
|
borderBottom: '0.5px solid',
|
|
paddingBottom: 2,
|
|
paddingTop: 2,
|
|
zIndex: 2
|
|
}}
|
|
>
|
|
Settings
|
|
</ListSubheader>
|
|
}
|
|
>
|
|
<ListItem component={Link} to={getProfileSettingsRoute(usersPubkey!)}>
|
|
<ListItemIcon>
|
|
<AccountCircleIcon />
|
|
</ListItemIcon>
|
|
{listItem('Profile')}
|
|
</ListItem>
|
|
<ListItem component={Link} to={appPrivateRoutes.relays}>
|
|
<ListItemIcon>
|
|
<RouterIcon />
|
|
</ListItemIcon>
|
|
{listItem('Relays')}
|
|
</ListItem>
|
|
<ListItem component={Link} to={appPrivateRoutes.cacheSettings}>
|
|
<ListItemIcon>
|
|
<CachedIcon />
|
|
</ListItemIcon>
|
|
{listItem('Local Cache')}
|
|
</ListItem>
|
|
{loginMethod === LoginMethod.nostrLogin && (
|
|
<ListItem component={Link} to={appPrivateRoutes.nostrLogin}>
|
|
<ListItemIcon>
|
|
<ExtensionIcon />
|
|
</ListItemIcon>
|
|
{listItem('Nostr Login')}
|
|
</ListItem>
|
|
)}
|
|
</List>
|
|
</Container>
|
|
<Footer />
|
|
</>
|
|
)
|
|
}
|