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 { 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> <ListItemButton onClick={() => { navigate(appPrivateRoutes.cacheSettings) }} > <ListItemIcon> <CachedIcon /> </ListItemIcon> {listItem('Local Cache')} </ListItemButton> </List> ) }