github.com/martinohmann/rfoutlet@v1.2.1-0.20220707195255-8a66aa411105/web/src/components/settings/SettingsDialog.js (about) 1 import React from 'react'; 2 import PropTypes from 'prop-types'; 3 import { List, ListItem } from '../List'; 4 import ListItemIcon from '@material-ui/core/ListItemIcon'; 5 import ListItemText from '@material-ui/core/ListItemText'; 6 import LanguageIcon from '@material-ui/icons/Language'; 7 import { useTranslation } from 'react-i18next'; 8 import { useHistory, useRouteMatch } from 'react-router'; 9 import Dialog from '../Dialog'; 10 import SvgIcon from '@material-ui/core/SvgIcon'; 11 import config from '../../config'; 12 13 export default function SettingsIndex({ onClose }) { 14 const history = useHistory(); 15 const { url } = useRouteMatch(); 16 const { t, i18n } = useTranslation(); 17 18 return ( 19 <Dialog title={t('settings')} onClose={onClose}> 20 <List> 21 <ListItem onClick={() => history.push(`${url}/language`)}> 22 <ListItemIcon> 23 <LanguageIcon /> 24 </ListItemIcon> 25 <ListItemText primary={t('language-settings')} secondary={i18n.language !== 'en' ? 'Language Settings' : ''} /> 26 </ListItem> 27 <ListItem onClick={() => window.open(config.project.url, '_blank')}> 28 <ListItemIcon> 29 <GitHubIcon /> 30 </ListItemIcon> 31 <ListItemText primary={t('project-on-github')} secondary={config.project.url.replace('https://', '')} /> 32 </ListItem> 33 </List> 34 </Dialog> 35 ); 36 } 37 38 SettingsIndex.propTypes = { 39 onClose: PropTypes.func.isRequired, 40 }; 41 42 const GitHubIcon = () => { 43 return ( 44 <SvgIcon> 45 <svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"> 46 <path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.2.9.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1 .9 2.2v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3"></path> 47 </svg> 48 </SvgIcon> 49 ); 50 };