diff options
Diffstat (limited to 'packages/renderer/src/components/locationBar/NavigationButtons.tsx')
-rw-r--r-- | packages/renderer/src/components/locationBar/NavigationButtons.tsx | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx new file mode 100644 index 0000000..ab455eb --- /dev/null +++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx | |||
@@ -0,0 +1,76 @@ | |||
1 | /* | ||
2 | * Copyright (C) 2022 Kristóf Marussy <kristof@marussy.com> | ||
3 | * | ||
4 | * This file is part of Sophie. | ||
5 | * | ||
6 | * Sophie is free software: you can redistribute it and/or modify | ||
7 | * it under the terms of the GNU Affero General Public License as | ||
8 | * published by the Free Software Foundation, version 3. | ||
9 | * | ||
10 | * This program is distributed in the hope that it will be useful, | ||
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
13 | * GNU Affero General Public License for more details. | ||
14 | * | ||
15 | * You should have received a copy of the GNU Affero General Public License | ||
16 | * along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
17 | * | ||
18 | * SPDX-License-Identifier: AGPL-3.0-only | ||
19 | */ | ||
20 | |||
21 | import IconArrowBack from '@mui/icons-material/ArrowBack'; | ||
22 | import IconArrowForward from '@mui/icons-material/ArrowForward'; | ||
23 | import IconStop from '@mui/icons-material/Close'; | ||
24 | import IconHome from '@mui/icons-material/HomeOutlined'; | ||
25 | import IconRefresh from '@mui/icons-material/Refresh'; | ||
26 | import Box from '@mui/material/Box'; | ||
27 | import IconButton from '@mui/material/IconButton'; | ||
28 | import { useTheme } from '@mui/material/styles'; | ||
29 | import { observer } from 'mobx-react-lite'; | ||
30 | import React from 'react'; | ||
31 | import { useTranslation } from 'react-i18next'; | ||
32 | |||
33 | import type Service from '../../stores/Service.js'; | ||
34 | |||
35 | function NavigationButtons({ service }: { service: Service }): JSX.Element { | ||
36 | const { t } = useTranslation(undefined, { | ||
37 | keyPrefix: 'toolbar', | ||
38 | }); | ||
39 | const { direction } = useTheme(); | ||
40 | |||
41 | return ( | ||
42 | <Box display="flex"> | ||
43 | <IconButton | ||
44 | aria-label={t('back')} | ||
45 | disabled={!service.canGoBack} | ||
46 | onClick={() => service.goBack()} | ||
47 | > | ||
48 | {direction === 'ltr' ? <IconArrowBack /> : <IconArrowForward />} | ||
49 | </IconButton> | ||
50 | <IconButton | ||
51 | aria-label={t('forward')} | ||
52 | disabled={!service.canGoForward} | ||
53 | onClick={() => service.goForward()} | ||
54 | > | ||
55 | {direction === 'ltr' ? <IconArrowForward /> : <IconArrowBack />} | ||
56 | </IconButton> | ||
57 | {service.loading ? ( | ||
58 | <IconButton aria-label={t('stop')} onClick={() => service.stop()}> | ||
59 | <IconStop /> | ||
60 | </IconButton> | ||
61 | ) : ( | ||
62 | <IconButton | ||
63 | aria-label={t('reload')} | ||
64 | onClick={(event) => service.reload(event.shiftKey)} | ||
65 | > | ||
66 | <IconRefresh /> | ||
67 | </IconButton> | ||
68 | )} | ||
69 | <IconButton aria-label={t('home')} onClick={() => service.goHome()}> | ||
70 | <IconHome /> | ||
71 | </IconButton> | ||
72 | </Box> | ||
73 | ); | ||
74 | } | ||
75 | |||
76 | export default observer(NavigationButtons); | ||